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:


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!

Tags: , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *