The Global navigation in SP Online classic team sites gets displayed next to the site logo and above logo in Modern Experience.

Its easy to modify CSS for classic pages as they are attached to a master page. But what could be done in Modern Experience, if I want to change CSS and bring the Global Nav to other location with improved font site? Refer below screen shot.

enter image description here

  • 1
    will need to use SPFx extensions, something like global nav bar and inject css. In Modern Pages, masterpages wont work, need to inject it via Application Customizer type SPFx extensions Commented Nov 1, 2018 at 7:24
  • @GautamSheth thanks, injecting css looks like a good idea. Just one thing we need to cautious. Since Modern UI keeps on updating, the class names applied on elements will remain for a really long time. As we can see in classic experience all IDs and Classes are predictable.
    – Asad Refai
    Commented Nov 1, 2018 at 9:49

1 Answer 1


Use a custom action which inject css, js or jQuery. There are many ways to do this. I am fan to do this with Office Dev PnP Powershell.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.