How do I change the navigation bar color in Standard theme?

There’s a couple of things going on here:

You currently have gradient overlays on the 2 sections:

.navbar-inner, .navbar .fill {
    background-color: rgb(32, 32, 32);
    background-image: -moz-linear-gradient(center top , rgb(32, 32, 32), rgb(28, 28, 28));
}
...
.navbar-inner {
    ...
    background-image: -moz-linear-gradient(center top , rgb(51, 51, 51), rgb(34, 34, 34));
}

You can either play with the RGB colours in these and fade from a light blue to a darker one, or if you just want solid colour, delete that background-image lines and change the background-color one.

Cheers,

–Jon.

Thanks Jon! I have tried playing with the colors in my code below, but nothing seems to work. I deleted all the lines except for the background-color line, and also tried it with leaving the last “prodig…” line. Can’t seem to get any results.

Any thoughts on what I may be doing wrong?

.navbar-inner, .navbar .fill {
background-color: #202020;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(32, 32, 32)), to(rgb(28, 28, 28)));
background-image: -webkit-linear-gradient(top, rgb(32, 32, 32), rgb(28, 28, 28));
background-image: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(28, 28, 28));
background-image: -o-linear-gradient(top, rgb(32, 32, 32), rgb(28, 28, 28));
background-image: -ms-linear-gradient(top, rgb(32, 32, 32), rgb(28, 28, 28));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#202020′, EndColorStr=’#1c1c1c’);
}

kentsanders : :

We cover how to do this and much, much more on our support forum.

If you are not a Support License holder, you can upgrade at any time.

Do you want the gradient on there, or are you just after a solid colour?

kentsanders : :

The following CSS is taken from our Standard 3 color style guide on the support forum. It should be plenty to get you started.

/* Navigation
---------------------------------------------------------------- */

/* Above Header
---------------------------------------------- */

/* background */
#menu-above-header .navbar-inner,
.navbar .fill {
	background-color: #FF0000;
	background-image: none;
}

/* hover menu items */
#menu-above-header.navbar .nav li > a:hover {
    background-color: #FFFFFF;
}

/* active menu items */
#menu-above-header.navbar .nav .active > a,
#menu-above-header.navbar .nav .active > a:hover {
    background-color: #ABCDEF;
}

/* text */
#menu-above-header.navbar .nav > li > a {
	color: #0000FF;
}
#menu-above-header.navbar .nav > li > a:hover {
	color: #00FF00;
}

/* Below Header
---------------------------------------------- */

/* background */
#menu-under-header .navbar-inner,
.navbar .fill {
	background-color: #FF0000;
	background-image: none;
}

/* hover menu items */
#menu-under-header.navbar .nav li > a:hover {
    background-color: #FFFFFF;
}

/* active menu items */
#menu-under-header.navbar .nav .active > a,
#menu-under-header.navbar .nav .active > a:hover {
    background-color: #ABCDEF;
}

/* text */
#menu-under-header.navbar .nav > li > a {
	color: #0000FF;
}
#menu-under-header.navbar .nav > li > a:hover {
	color: #00FF00;
}

Manovotny, thank you! I appreciate your help. I feel so stupid – I’m actually a member of the support forum, but I forgot about checking there. I was so busy searching on www.remarpro.com it didn’t occur to me to check there. I will definitely do that next time! Thanks for the code – I will check that out.

ChiefWigs1982, thanks for asking – I’m just going for a solid color.