Change the Colour of the Menu Bar Opencart

For this tutorial I will be showing you how to change the colour of the menu bar in opencart.

Menu Bar.

For this I will be using my cPanel file manager. You will need to locate your stylesheet, to find this you need to go on cPanel file manager, FileZilla or what ever you are using. The location is public_html/catalog/view/YOUR THEME/stylesheet/stylesheet.css.

YOUR THEME is the theme you are using, so mine is default meaning I would put default instead of your theme. 

Once in the stylesheet you will need to find #menu { (mine is on line 192-204). 

This is what you should see:

#menu {

background-color: #F2F2F2;

background-image: linear-gradient(to bottom, #F2F2F2, #F2F2F2);

background-repeat: repeat-x;

border-color: #F2F2F2 #F2F2F2 #F2F2F2;

min-height: 40px;

}

#menu .nav > li > a {

color: #848484;

text-shadow: 0 0px 0 rgba(0, 0, 0, 0);

padding: 10px 15px 10px 15px;

min-height: 15px;

background-color: transparent;

To achieve the look i wanted i changed background-color, background-image, border-color. This changed the menu bar colour, however the text was too light to read and also has a shadow to it. To fix this i changed the text colour and set the text-shadow to 0. 

Result.

When you make these changes also check your mobile version of your website, currently mine looks like this.

Mobile.

The text 'categories' is barely visible and the drop down button is a different colour. To change this  you will need to find #menu .btn-navbar { (Mine is on line 247-265).

This is what you should see:

#menu #category {

float: left;

padding-left: 15px;

font-size: 16px;

font-weight: 700;

line-height: 40px;

color: #848484;

text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);

#menu .btn-navbar {

font-size: 15px;

font-stretch: expanded;

color: #848484;

padding: 2px 18px;

float: right;

background-color: #F2F2F2;

background-image: linear-gradient(to bottom, #F2F2F2, #F2F2F2);

background-repeat: repeat-x;

border-color: #F2F2F2 #F2F2F2 #F2F2F2;

To change the colour of the drop down button i changed background-color, background-image, color and border-color. To change the colour of the category text change color and again the text had a shadow to it so i changed text-shadow to 0. 

Result.

Like I have said in previous posts this is the way I found easiest, others may do this a complete different way.

Sam.