How to change background color of top menu in nopCommerce

In this blog post, we’ll look into the steps to add a background color to menu bar in  nopCommerce.

Go to this location –

Themes/DefaultClient/Content/css/styles.css

 

Open the stylesheet and find this code-

 

.header-menu {
 position: relative;
 z-index: 5;
 width: 980px;
 margin: 0 auto 30px;
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 padding: 25px 0;
 text-align: center;
}

 

Now, we will add background color like this –

.header-menu {
 position: relative;
 z-index: 5;
 width: 980px;
 margin: 0 auto 30px;
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 padding: 25px 0;
 text-align: center;
 background-color:orange;
}

 

This is the output:

 

 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 StrivingProgrammers.com - 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 *