How to change background color of top menu bar in nopCommerce

nopCommerce comes with a nice DefaultClean theme that gives your online store site a great look. But, there are times  when many store owners would like to change the default style or colors of their store site layout. Today, we will go over the process of changing the background color of the top menu bar of your nopCommerce based store site.

For this example, we will be using "DefaultClean" theme.

1) Go to your theme folder in this location: Nop.Web/Views/Themes/DefaultClean

2) Now, go to the style.css which is located in this location: 

nopCommerce menu bar

3) Open the style.css file and look for the class "header-menu"

4) Once you find the class, you will see this code:

/* top menu */
.header-menu{background:none repeat scroll 0 0 #404040;border-radius:4px;-o-border-radius:4px;-icab-border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;height:auto;list-style:none outside none;margin:10px auto 0;padding:0 10px;}

5) You can see in the code, the background color is defined as: #404040

6) For this example, we will change the color to blue (#3104B4) like this:

.header-menu{background:none repeat scroll 0 0 #3104B4;border-radius:4px;-o-border-radius:4px;-icab-border-radius:4px;-khtml-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;height:auto;list-style:none outside none;margin:10px auto 0;padding:0 10px;}

7) That's it - Run your website and see the updated background color of your top menu bar:

nopCommerce top menu bar

Note: In case, you do not see any change, make sure to clear the history and cache of your browser.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment