Twenty Eleven Menu Background Color WordPress Video

Twenty Eleven Menu Background Color – Dark Color by Default

This tutorial has been a bit special for me, because I really wanted to create it long time ago, as it is simple and does not require a lot of time to make a screencast or video tutorial.

However, I have been so busy lately, and always replaced by some other posts which I got first in my head.

Using default theme wordpress current version, 3.2.1 is kind of cool, but for a few people might be a bit boring, as it has same colors for those who use this template.

By creating child theme, you can actually modify the color or editing style css file, so at least you can tweak the default colors as you want it to be.

Small example, like today, we are going to change the menu background color of Twenty Eleven, which is by default (once you installed wordpress) is having dark gradient navigation color, which I personally think it is almost black like night without stars..

At the very first time, I had this theme activated in my blog, I was excited in a lot of things, including so many options it has in the back-end, but also I had a thought immediately in my mind, about changing that dark color.

Before we change menu background color in Twenty Eleven

If you are a wordpress blogger or currently own a website that you built with WP, and you are using Twenty Eleven theme, this tutorial can be an alternative to tweak a simple thing in your website.

If you don’t use this default theme, then this tutorial will not work, if you follow the exact steps.

But if you see me using Firebug, one of my favorite Firefox Addons to inspect a site’s element, and then apply to your current theme, then it is possible to achieve what you want to do with the theme. (for instance, if you use Twenty Ten, you can follow this background menu twenty ten theme tutorial)

Before we go to the steps of how to change menu background color Twenty Eleven, I have promised in the video to post a quick link to a small tool which helped me choosing color.

This small application is called, Hexa color finder 3.0 which you can download here.

Things I have to mention before you go to the steps and watch the video tutorial;

First, I am using a child theme in this tutorial, which is very recommended if you work with TwentyEleven theme, the reason is, as we all know wordpress developer may make changes in the theme, and if we don’t create a copy or child theme, our modification will be just gone.

Another one, is you can access the “themes” folder via FTP client (my favorite is FileZilla) or via cPanel directly in your webhost.

I know for some people this is very simple, however, I received many questions from YouTube or contact page, about “how do I access this or that folder”.

One tutorial that might help how to use FileZilla, is uploading files with FTP tutorial.

If you need further assistance with FTP client, you can also ask your host.

Steps how to change Twenty Eleven Menu Background Color

Screenshot of the result:

menu background color
From dark color to green

Video tutorial

1. Creating Child Theme

2. Access child theme folder, in this tutorial I created “MyTwentyEleven” folder.

3. Open style.css file with a text editor, or code editor if you are in your cPanel. (in the video, I use code editor).

4. Add this code in the style.css file: (see screenshot below)

border-bottom:1px solid #619B60;

change menu color twentyeleven
The code we add

Change the color as you prefer.

5. Save the changes, and refresh your blog.

We just did change Twenty Eleven Menu background color successfully.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page


  1. says

    Nice post Kimi. I appreciate your skill of building up interesting paragraph even for short content. Though this post is about changing menu background color, it has some useful side information. Knowing a bit of HTML and CSS makes a blogger more powerful.

    • says

      Hi Suresh!

      Thanks for the compliment, this is because I use SEOPressor like you do lol..

      In the past, I am too lazy writing too long though, this can be noticed in my old posts from last year :)

      Thanks for leaving a comment!

      Best wishes


  2. Jochen says

    Hi Kimi.
    Thanks for your Tuto. I tried it, but nothing happened. I’m running Twenty Eleven 1.3 on WP 3.3.1_de. I checked via FTP, the new css was placed on the server correctly. Whats about the other background entries?
    #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%;


    • Jochen says

      It’s workin now. I first worked in the theme-css. Now I’m on a child-css and all is fine.