how to change the color of the "pages" menu bar in twenty eleven theme

  • Author
  • #691674

    Hi, currently the color of the pages menu bar underneath my header is black and I instead would like for it to be white. Does anyone know how I go about doing this? Thanks!

    The blog I need help with is


    The site linked to your username is using Blix. What is the address of the site you are talking about please?


    This is tricky. The is what is in the CSS for the nav.

    #access {
    background:-moz-linear-gradient(#252525, #0a0a0a);
    background:-o-linear-gradient(#252525, #0a0a0a);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a));
    background:-webkit-linear-gradient(#252525, #0a0a0a);

    It is a linear gradient and as you can see, there are 4 separate declarations to cover all the different browsers (except for IE since IE requires jumping through flaming hoops). There is also a standard background declaration (#222) for those browsers that do not support gradients.

    Now the bad news. Unless has changed things, if you put multiple background declarations into the CSS such as below, the CSS tidy software they use will strip all the gradients out. So what you are probably going to have to do is declare just a single color as below.

    #access {

    [UPDATE from Staff: We’ve changed things! You can copy that longer block of multiple background rules and swap out all of the colors and it will work in your Appearance → Custom Design → CSS page now. Cheers. :)]


    Excellent, thank you! i have two more additional questions:

    How do I remove the search box that is grey underneath my header? (the one that is located in the menu bar)

    Additionally, how do I change the menu bar fonts to a darker color?


    Font color in menu.

    #access a {
    color: #EEEEEE;

    Hide search in menu area.

    #branding #searchform {
    display: none;


    As you know I’m visually challenged. The font being used on this blog is extremely pale in color. The readability factor is very low as it’s a stylized font and there a gaps in letters like e, a and o. Rather than seeing whole letters I’m seeing gaps in the letters themselves. Thumbs down.


    The change in the font color when she makes it should help out, but if it were me, I would probably increase the font size as well. When bold is applied to smaller fonts such as on the “current page item” it makes it harder to read.


    using “EEEEEE” made the menu bar words lighter in color. Did I not implement it correctly? I’m really just looking to use black.


    ahhh! i got it. thank you. One more thing, how do I make the word “Home” not be bold?



    Bold or not made zero difference to me and the size is not a problem. As far as accessibility goes I would score that font very low on the readability scale.


    i’m confused, are you talking about my fonts?



    Yes, I was. They are stylized in such a manner as to create gaps in the letters so the eye has to force use to complete them. Take a close look at the letters like a, e, o and s. This is extremely tiring to the eyes. But that being said you can treat me like fly on the wall and I’ll now buzz off. :D Best wishes with your editing.


    This isn’t as noticeable in Safari as in Firefox in your post titles. As an example in FF the vertical in the capital letter “P” appears like it is two parallel lines. In Safari, it is just one line. The horizontal in the lowercase “e” looks like two lines in both. It’s a rendering issue with browsers mostly.


    Okay, thanks timethief and TSP for pointing that out – I switched to the default font, and on safari it looks fine to me. Does it look okay on your web browsers? Also, I still cannot figure out how to make the word home not appear bold.

    Thanks again!


    Home appears bold to give indication that that is the current page a vistor is on. To change it so there is no indication, add the following.

    #access .current_page_item > a, #access .current_page_ancestor > a {
    font-weight: normal;


    I love the font change. I can read it with ease. Hooray!


    I’m working with Twenty Eleven as well, and all I want to do change the black nav bar to blue logo color.

    Using this:

    #access {

    Just turns the bar white. What am I missing here?



    Will you please post an active link starting with http:// to the blog you are CSS editing?


    That would have been a good idea on my part :D

The topic ‘how to change the color of the "pages" menu bar in twenty eleven theme’ is closed to new replies.