Move menu bar above header in Twenty Eleven?

  • Author
  • #662064

    Hi there! I’d like the CSS code for moving the menu bar to be above the header image in the Twenty Eleven theme. My website is Thanks!

    The blog I need help with is


    One more thing….could you also provide the CSS for making a box shadow for the page? Thanks!



    I don’t help with CSS editing. Only 1 Volunteer usually does when he can but when you purchase a custom design upgrade you do get Staff support. While you are waiting you may wish to search the threads produced by a forum search as your questions may have already been answered.
    Also note > When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:


    For the menu, give the following a try, but make sure and check the site when logged in and logged out. Sometimes the positioning declarations can be a little tricky, but I think this will work in both cases. It appears like you got the box shadow in there on your own. Congrats on that!

    #access {
    position: absolute;
    top: 0;
    #branding img {
    margin-top: 43px;

    Neat how a position change works on a theme like that. :)

    Cute photos! I love photography.

    I noticed you’re stretching the header image from 100×288 to 850×300 and I think it would look nicer if you displayed the custom header image more like this:

    header#branding a img {
    display: none;
    header#branding {
    background: url( no-repeat 0px 40px;
    height: 284px;
    width: 850px;

    Note that if you do that, it will override what you set in the Appearance → Header page, and you would have to change the header image through the Custom CSS page instead of in the settings as long as the background url is set manually like that.


    Thanks to you both! I love the menu being up on top and I so appreciate the extra coding suggestion for the header – I definitely like it better. Have a great week!


    You are welcome.

    @sheri, yes it is cool being able to move the nav so easily. With the parent element having position: relative; set, the position absolute and top value will relate to the parent element. On older themes, you have to go in and set the parent to position relative, but on many of the newer themes, that is already done.

The topic ‘Move menu bar above header in Twenty Eleven?’ is closed to new replies.