How to Change the Menu Bar Color in SuperSite

When you want to update the visual style of the SuperSite menu. This article explains how to change the menu bar color in SuperSite.


Objective:

Change the color of the Menu Bar on your Supersite as illustrated below:

1. Visit your Supersite and right click on the Menu Bar >> Inspect Element.
   • This will either open a separate window or open a pop-up on the same page. Click on the 3 vertical dots next to the 'X' on the top right corner of the window/pop-up as illustrated below:

     

   • Select the dock side as 'Dock to right' as illustrated below:

     

   • The window should look like:

     

   • Click on "Elements" and "Styles" as illustrated below:

     

2. Click on <div id="primary-nav"> under the Elements section as shown below:

   

3. The CSS file responsible for the styling will be populated in the window to the right.

   

4. Hover over to the file name as illustrated above and you will see the CSS file responsible for this content and the line number. In this case it is "superdupersitev1.css".
5. Navigate to the following path and line number:
   Dashboard » Manage Theme » CSS » Common » Superdupersitev1.css » Line 68
6. Access the Supersite admin area and follow the path above. Go to the file and scroll down to line 68 and you will see the following.

   background: #000

7. This is the hex code for black. Change #000 to any color of your choice. If you wish to customize the color or use any other color you can refer to the link below:
   https://htmlcolorcodes.com/
8. Click on Save Changes and reload the Supersite cache for the changes to take effect.