Twenty Eleven menu bar color

massimo6342:

If you want to update the 2011 theme in the future, you’ll need to create a child theme. Here’s the codex page for child themes: https://codex.www.ads-software.com/Child_Themes . Optionally, this plugin claims to create a child theme for you: https://www.ads-software.com/extend/plugins/one-click-child-theme/ . I have not used the plugin.

The navigation bar in 2011 uses a CSS3 gradient. Here’s the CSS for access (the navigation bar):

#access {
background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}

You need to change the first rule regarding background.

If you don’t care about updating the 2011 theme, edit the 2011 style.css file, scroll to the bottom and add this:

#access {
background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
}

The two hex values are the starting color and the ending color. To go from black to white the colors would be: (#000000, #FFFFFF). To go from red to blue: (#FF0000, #0000FF). You can experiment with the colors you want.

If you want a solid color change the rule to look like this:

background: none repeat scroll 0 0 #FF0000;

The hex value in the example is red. Change it to match the color you want.

If you create a child theme (recommended), add the new CSS rule to the style.css file for your child theme.

Note: You can use rgb values as well, if you’re more familiar with rgb. For example, using red: rgb(100%,0,0) or rgb(255,0,0).

Kurt, thank you very much for your answer. Very clear. I am testing so I changed the style.css file and the menu bar now appears as I like. I plan to create a child theme to make things cleaner and easier to maintain. I learned a lot so thank you again, Massimo.

Massimo: I looked at your site. The matching color looks better than black.

Glad I could help.

I need help doing the SAME thing Kurt! I would like to change my menu bar color to purple. Can I get some help?

If you go to https://www.iamchristianj.com you will notice that the menu bar is black…..I want it purple

@[email protected]: Please post your own topic.

@[email protected]
Hi, I followed Kurt suggestions to find where to change color. You should create a child-theme that would be the best solution to make changes to the theme. If you are in a hurry there is the “dirt” solution: change the style.css file in your wp directory. You have to find the lines where the /* Menu …. */ appears and change the colors as you may need. I did it this way:
/* =Menu
————————————————————– */

#access {
background: #BA232A /* #222 original changed by Massimo*/; /* Show a solid color for older browsers */
background: -moz-linear-gradient (##BA232A, ##A1232A);/*(#252525, #0a0a0a); */
background: -o-linear-gradient (##BA232A, ##A1232A);/*(#252525, #0a0a0a); */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(##BA232A), to(##A1232A)); /* older webkit syntax */
background: -webkit-linear-gradient(##BA232A, ##A1232A);

———————-
Leave the following lines as they are. I strongly suggest to make a backup copy of your style.css file BEFORE making any changes. Apply the changes and replace the original file. It should work. Be careful.
As a reference my site: https://www.roma2oggi.it/ Ciao, Massimo

You DON’T need to do any of this.

You can fix this in seconds!!!
https://www.ads-software.com/extend/plugins/styles/

We have a Plugin that will change the menu color and over 50 other appearance settings.

It is called “Styles” by Brainstorm Media. (It’s Free!!)

Once installed, it will show under the Appearance menu.
Look for the section called Main Menu and the first option is Wrapper.
Click the little green box (for color,) type in your HEX# or choose a color.

Thats it. Your done.

Look at your newly colored menu. Yay ??

Happy Designing,

Taylor

[signature moderated]