Need help? Check out our Support site, then


Black strip under header/twenty eleven

  1. I am using twenty eleven w/ CSS upgrade and wondering if there is a way to remove the dark strip under the header? Or change color?
    Thanks!

    The blog I need help with is browndirt.wordpress.com.

  2. Hi there,

    It looks like you were able to figure this out. Did you mean to remove the navigation as well?

  3. That "dark strip" is the navigation menu. The color is actually a CSS3 gradient rather than a single color, but that takes about 5 separate background declarations and the CSS tidy thing used here will strip them out if you try and edit all of them, so I recommend going to just a single color.

    #access {
    background: #252525;
    }

    If you want to hide it, then do this

    #access {
    display: none;
    }

    Not though that then no one will be able to get to your "about" page, or any other static pages that you create unless you add the pages widget to your sidebar, or create a custom menu and then add the custom menu widget to the sidebar.

  4. Oh wow, now I don't know where it went. You are right, the navigation bar is gone. But the only CSS changes I've made are:

    #branding hgroup,#branding #searchform {
    display:none;
    }

    .entry-meta {
    display:none;
    }

    Hmm. Any idea why it might have gone away? Eeeps.

  5. I tried reverting your changes and still no menu. For one thing, you don't appear to have any pages in your menu. As a first step, try adding some in Dashboard -> Appearance -> Menus.

    Then we can go from there.

  6. Ah, that was the problem with the disappearing bar. I put some random pages up.
    I tried stripping to single color but that didn't seem to change anything?

  7. It could be that the other background declarations for the menu (there are about 5 different gradients) are causing issues. Give this a try instead and edit the hex color code to your liking.

    #access {
    background: #252525 !important;
    }
  8. So, to clarify, you changed the #access {background:xxx;} in your stylesheet to #access {background:#FFFFFF;} or similar?

  9. is the #FFFFFF a hex color code? So i use that change with the number that I like?

  10. @thesacredpath - It worked when I simply changed to a hex color code in Firebug without the !important declaration, but it's worth a try, I suppose.

  11. Bingo! Got it! Thanks a ton!! I really appreciate it!

  12. No problem, glad to help!

  13. Yep, #FFFFFF is a hex color code. Check out the Wikipedia page on web colors for excessive-but-good amounts of details: http://en.wikipedia.org/wiki/Web_colors :)

  14. I would suggest if you keep the bright green color, that you change the color of the text (non-hover) to pure white for more contrast.

    #access a {
    color: #FFFFFF;
    }

    Or perhaps to the brown from your header image: #554422 .

  15. Thanks so much!

  16. You are welcome.

  17. If you want to a tool to pick out colors from existing web pages, ColorZilla is a browser add-on for Firefox that I've always liked. Check it out: https://addons.mozilla.org/en-US/firefox/addon/colorzilla/

  18. Thanks! That will help a lot!

  19. I've read this thread with great interest. I'm also trying to change the color of the nav bar in twenty eleven and have tried various things but IT'S NOT WORKING!

    The code I see in my Stylesheet is this:

    /* =Menu
    -------------------------------------------------------------- */

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#D7D3D3, #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(#222, #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%;
    }

    I've tried changing the color code on this:

    #access {
    background: #222;

    But nothing changes.

    Can anyone help??

    NB I'm using this theme on wordpress.org - would that make any difference?

    Grateful for any tips.

    Thanks!

    Alda

  20. @lettersfromacademia

    lettersfromacademia.wordpress.com is no longer available.
    The authors have deleted this blog.

    That's the result of clicking your username. Will you please provide an active link starting with http:// to the blog you are attempting to edit the CSS on?

  21. I'm using this theme on wordpress.org - would that make any difference?

    Yes. The two run on different software and the theme versions are coded differently. This forum is only for those with free hosted WordPress.com blogs who have paid for an annually renewable custom design upgrade. We cannot help you here with your WordPress.org install at all. Please post to the correct forum for your software http://wordpress.ORG/support/

    Best wishes for getting the help you need there. :)

  22. Best wishes for getting the help you need there. :)

    Indeed. There is no help there - that's why I'm grasping at straws over here.

    The two run on different software and the theme versions are coded differently.

    Got it. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic