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:
Themes/DefaultClean/Content/style.css

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:

Note: In case, you do not see any change, make sure to clear the history and cache of your browser.
Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!