How to change the background color of the menu bar?

From your dashboard, go to Appearance > Editor

Edit the css file of your template — you’re using twentyeleven, right? Change the background values of #access and use the colors that you want.

Many thanks for the speedy reply….

This is what i copied from my css file, can u advice where exactly these changes need to take place?

/* =Menu
————————————————————– */

#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}

You’ll want to change the hex color values listed (#252525, #0a0a0a) to a hex value representing the color you want to use.

Brief note on hex colors… there are three pairs of two alphanumeric characters (0-9 or A-F), each pair represents a piece of the RGB color space with a value of 0-255 (ex. black is #000000, white is #FFFFFF, red is #FF0000, etc).

So, you need to convert your gradient color choices from RGB to Hex, then use that representation in the CSS code, replacing the old values. You can use this tool (https://www.javascripter.net/faq/rgbtohex.htm) to convert from RGB to Hex. You may also want to generate a replacement for #222, which is a solid color that’ll show to browsers that don’t support CSS gradients.

I hope this helps!

You should replace all the ‘background:’ lines with your new color. If you just want one color, delete all of them and place just one background: #ffffff; where #ffffff is the HEX value of the color you desire. #ffffff is white, #000000 is black.

If you want to use a gradient (which is what all those ‘background:’ statements are doing) you can grab replacement code in the color of your choice from this great website. Just copy and paste the background CSS to replace all of the background statements in the #access definition.

thank you so much for tip, it worked finally.

can u please advice how to i change the color of the text on the menu bar as well?

thanks again for yr help….much appreciated

insert this line:

color: #ffffff;

before the closing bracket } if you want to change the text to white (use the hex value of the color you want to use).

yes is ok