Need help? Check out our Support site, then


Move position of main nav bar to below header image

  1. Is it possible to move the main nav bar to a position below the header image in twentytwelve. I have custome design.

    Would something like this do it?

    .main-navigation {
    position: absolute;
    top: XXXpx:
    }

    where XXX is the position? If so what position should I use?

    Thanks

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

  2. Give this a try and see what you think.

    .main-navigation {
    bottom: 0;
    position: absolute;
    }
    
    site-header {
    padding-bottom: 70px;
    position: relative;
    }
  3. Hi there

    Thanksfor this, but unfortunately it moves the main nav bar to below the contact of the whole page, not to just below the header....

  4. Sorry, I had an oops and somehow missed the opening . on site-header. Use this:

    .main-navigation {
    bottom: 0;
    position: absolute;
    }
    
    .site-header {
    padding-bottom: 70px;
    position: relative;
    }
  5. lookwestlondon
    Member

    I have a similar qu. i want to do roughly the same on theme Yoko - move the navbar below the header image. i've tried the code you've put above here for katie, but it's not working on yoko. Can you help pls?

  6. Please start a new thread since you are using a different theme. That keeps down the confusion later on when someone lands on this thread. Thanks in advance. I'll keep a lookout for your new thread.

  7. lookwestlondon
    Member

    will do.

  8. I have tried the above code into the CSS editor, and there is no change made, ideas? I am using twentytwelve too.

  9. Works just fine for me on my test site. Give it another try.

Topic Closed

This topic has been closed to new replies.

About this Topic