Customize Twenty Eleven Theme Nav Menu Background Color

Changing colors on default WordPress parent themes isn’t always smooth sailing.

Different default themes use different selectors so the code is a bit different.

You can simply add the CSS code below if you want to change the background of your navigation menu.

If you paste this code into your Twenty Eleven child theme, it will change the background color of your navigation menu.

#access {
background: red;
}

You can change the color or try something a bit more fancy.

Try using a gradient generator to produce a slick looking background.

The generator will produce all the code which is cross browser friendly, all you do is choose from one of the preset color gradients.

Once you’ve chosen your code, add it to your child themes style.css file or Custom CSS Editor.

Using the selector for Twenty Elevens nav menu, #access, your code will look like this.

#access  {
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}

Its a heap code and there’s actually more which i didn’t include for the background.

This code covers all browsers and older versions.

You may only want to use some of this code but then you may have a problem and your background doesn’t display in some browsers.

Example:

Create a Rainbow Background

Paste this code into your Twenty Eleven child themes style.css file.

#access {
background:-moz-repeating-linear-gradient(45deg,
purple 20px,
indigo 60px,
blue 110px,
green 160px,
yellow 200px,
orange 240px,
red 290px,
purple 320px)
}

If you test it in Firefox and I.E you’ll find out it only works in Firefox.

Solution

Paste any CSS code you want into the Colorzilla gradient generator and it will generate the code which is cross browser compliant.

Make sure you add support for I.E if you’re using it or want your background to display in that browser otherwise it will fallback to the background colors and not display the same as in Firefox.

Support for full multi-stop gradients with IE9 (using SVG).

Add a “gradient” class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

Paste this code into your header.php in your child theme, below the code for IE.8

Add Background Image To Nav Menu

You’ll need to create an images folder in your Twenty Eleven child theme and upload an image.

Then add this code to your child themes style.css file.

#access {
background-image: url(images/bg.png);
}

I used this image.

And here’s what the background looks like

Conclusion

We’ve covered:

• Changing the background color of the nav menu
• Creating a slick background using a gradient generator
• Adding an image to your nav menu
• Cross browser compatibility issues when using CSS code for background images.