How to change the background color of the Hub Navigation bar in SharePoint Online (to a specific color, not dependent on the theme)?

frob 4,261 Reputation points
2022-02-24T16:55:21.627+00:00

Hi there

How to change the background color of the Hub Navigation bar in SharePoint Online (to a specific color, not dependent on the theme)?

Thank you.

Microsoft 365 and Office | SharePoint | For business | Windows
{count} votes

Accepted answer
  1. JoyZ 18,111 Reputation points
    2022-02-25T06:01:38.907+00:00

    @frob ,

    In order to change the hub navigation bar color, we can go to site settings of hub site>Change the look>under the header section>Background> select a theme color to change the background color of your site header.

    177754-image.png

    Note that the background of the site header(include the hub navigation bar)will depend on your site theme:

    177707-image.png

    ----------------------------------------------------Update Answer--------------------------------------------------

    Sorry I missed your attached request, if you don't want to depend on the theme, we can add the modern script web part, insert css code to change the backgroud-color of the hub navigation bar:

    <style>  
    .root-42  
    {  
        background-color: #B2E23B !important;  
    }  
    </style>  
    

    178783-image.png

    Then republish the page to check the result:

    178756-image.png


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Idrees Shah 1 Reputation point
    2022-04-26T07:37:24.787+00:00

    Do I have to add "Modern Script Webpart" on all the pages of the Hub? How can i ensure that the change of hub navigation bar color is across all sites in the hub.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.