This tutorial will show you how to change colors of your primary menu called "Header Menu".



Please note that for any customizations and style.css changes we should work with Child Themes, if you don't have it, feel free to grab your copy here: http://themeid.com/forum/topic/505/child-theme-example/

But wait! I don't really know how, can we still change the menu colors without Child Theme? All right, you got me, sure you can. Go to Appearance > Theme Options > Custom CSS and paste it in



Child Themes are preferred method, but you can also use Custom CSS

Main Background

Step one is to go to /responsive/style.css which you can access from the WordPress editor and locate:

/* =Primary Menu
-------------------------------------------------------------- */
.menu {
    background-color: #585858;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    background-image: linear-gradient(top, #585858, #3d3d3d);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
    margin: 0 auto;
}

Now let's copy our menu to /responsive-child-theme/style.css (or Custom CSS).

Once we have the main menu in, we're going to change default colors to blue.

background-color: #585858;

is used for older browsers, but we still need to change them as well.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);

is used for Internet Explorer IE8 and bellow, please don't forget to change the colors here as well.

585858 is the starting colors of your menu gradient and 3d3d3d is the ending color of gradients and we're changing all two values, but we need to change all of them, not just in one place.

As noted above, in this example we'll be using blue:

/* =Primary Menu
-------------------------------------------------------------- */
.menu {
    background-color:#0084eb;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#0084eb), to(#005ea8));
    background-image:-webkit-linear-gradient(top, #0084eb, #005ea8);
    background-image:-moz-linear-gradient(top, #0084eb, #005ea8);
    background-image:-ms-linear-gradient(top, #0084eb, #005ea8);
    background-image:-o-linear-gradient(top, #0084eb, #005ea8);
    background-image:linear-gradient(top, #0084eb, #005ea8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0084eb, endColorstr=#005ea8);
}

After my color values are changed, I always like to get the left border changed too:

.menu a {
    border-color: #027ad7;
}

Awesome, now let's change and check the site:



Complete Menu:

/* =Primary Menu
-------------------------------------------------------------- */
.menu {
	background-color:#0084eb;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#0084eb), to(#005ea8));
	background-image:-webkit-linear-gradient(top, #0084eb, #005ea8);
	background-image:-moz-linear-gradient(top, #0084eb, #005ea8);
	background-image:-ms-linear-gradient(top, #0084eb, #005ea8);
	background-image:-o-linear-gradient(top, #0084eb, #005ea8);
	background-image:linear-gradient(top, #0084eb, #005ea8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0084eb, endColorstr=#005ea8);
}

.menu a {
	border-left:1px solid #027ad7;
	color:#fff;
	display:block;
	font-size:13px;
	font-weight:700;
	height:45px;
	line-height:45px;
	margin:0;
	padding:0 0.9em;
	position:relative;
	text-decoration:none;
	text-shadow:0 1px 1px #014880;
}

.menu a:hover {
	background-color:#4eb0fd;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#4eb0fd), to(#0084eb));
	background-image:-webkit-linear-gradient(top, #4eb0fd, #0084eb);
	background-image:-moz-linear-gradient(top, #4eb0fd, #0084eb);
	background-image:-ms-linear-gradient(top, #4eb0fd, #0084eb);
	background-image:-o-linear-gradient(top, #4eb0fd, #0084eb);
	background-image:linear-gradient(top, #4eb0fd, #0084eb);
	color:#fff;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb0fd, endColorstr=#0084eb);
}

.menu .current_page_item a {
	background-color:#005ea8;
}

And that's how we change the menu background colors.