Considering someone has created a script editor web part for modern sites, is there a way to style the global navigation (top bar) with colors?



It's always an option to alter the DOM with JavaScript or css. Although it is definitely not recommended or supported.

If you really want to change the global navigation in the modern experience, have a look at Application Customizers and use the header placeholder. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions


Try the below CSS in Script Editor Web Part :

.ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-  horizontalBox > ul > li > table
 color: red !important;

Please note that this is not a solution to apply your CSS on all pages. It will be applied only on the current page that holds this Script Editor Web Part.

Unfortunately, in Modern Experience, you can't customize the page to add JS or custom CSS as we did in classic mode, meanwhile, you can use SharePoint framework to achieve this. Refer to the below answer :

Provision files (css, js) with SharePoint Framework

I hope this helps .


The Header place holder is the area above Global navigation in a modern communication page. The enumeration seems to only have Header and Footer but nothing to customize Global Nav

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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