WordPress › Support » [Theme: Twenty Eleven] How can I change menu bar color?

Fabrizio Pivari
Member
Posted 11 months ago #

Hello,

how can I change the menu bar color (default is black)?
I think in style.css but I'm not css expert, can you indicate me the exact fields?

Thanks

Fabrizio

http://wordpress.org/extend/themes/twentyeleven/
Seacoast Web Design
Member
Posted 11 months ago #

look in

#access {

for

background-color; your_color_here;
Fabrizio Pivari
Member
Posted 11 months ago #

I've to change the black default with #b9cb13.
In style.css I go to
/* =Menu
-------------------------------------------------------------- */
#access {

I've not found background-color
so I've tried to change
background: #222; /* Show a solid color for older browsers */
into
background: #b9cb13; /* Show a solid color for older browsers */

But it doesn't work. Do I have to add background-color ?
esmi
Theme Diva & Forum Moderator
Posted 11 months ago #

Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.
Rev. Voodoo
Volunteer Moderator
Posted 11 months ago #
looking at your site.... none of the css has been changed - here is your code
```
#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);
```
be aware that all of those background lines would need some sort of change. the first one is the fallback for all browsers not supporting the gradient property. The next 4 lines are all proprietary broser specific gradients for the menu bar.

If you don't wish to have the gradient, and just want your colour, delete the four lines, and just keep that top line with your colour

Also, I see you are editing 2011 directly, which is not good, as you will soon lose your changes
http://vudu.me/child
That explains child themes, the article is about the 2010 theme, but the basis is the same for all themes
Fabrizio Pivari
Member
Posted 11 months ago #

Thanks for suggestions.
I've made
@import url("../twentyeleven/style.css");

#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #b9cb13);
background: -o-linear-gradient(#252525, #b9cb13);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b9cb13), to(#b9cb13)); /* older webkit syntax */
background: -webkit-linear-gradient(#b9cb13, #b9cb13);
}

and works!
Rev. Voodoo
Volunteer Moderator
Posted 11 months ago #

excellent! just a note, you may want to update this one line:

background: #222; /* Show a solid color for older browsers */

For users of older browsers like IE, etc. If you are worried what colour your menu appears to them. Currently they would still see a nearly black menu bar.
Fabrizio Pivari
Member
Posted 11 months ago #

I think I can't use #b9cb13.
What's the colour more similar?
Rev. Voodoo
Volunteer Moderator
Posted 11 months ago #

You should be fine really with that

the #222 is shorthand for #222222, you can use a 6 digit hex value.

If you are ever looking for a way to hunt down colours, kuler.adobe.com is a great site for finding values for colours
aasbd
Member
Posted 7 months ago #

It is a great post about changing menubar color. How can I change the site Title color? Any suggestion will be appreciated
http://www.aas-bd.com/
PTLF
Member
Posted 5 months ago #

Any how can I totally remove the menu? I managed to have it not showing up, but how do I get rid of the remaining background? Not only the color but the space? See it here:

http://personalfitnesstrainerluebeck.com/pro/aktion/vielen-dank/

Thanks for your help!