Move position of main nav bar to below header image

• 

  katieyoungs · Member · Apr 9, 2013 at 1:32 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 9, 2013 at 9:17 pm

  • Copy link

  Give this a try and see what you think.

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

• 

  katieyoungs · Member · Apr 10, 2013 at 9:35 am

  • Copy link

  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….

• 

  thesacredpath · Member · Apr 10, 2013 at 4:43 pm

  • Copy link

  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;
  }

• 

  lookwestlondon · Member · Apr 12, 2013 at 3:40 pm

  • Copy link

  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?

• 

  thesacredpath · Member · Apr 12, 2013 at 3:55 pm

  • Copy link

  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.

• 

  lookwestlondon · Member · Apr 12, 2013 at 4:03 pm

  • Copy link

  will do.

• 

  lmhutton1 · Member · Apr 15, 2013 at 5:46 pm

  • Copy link

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

• 

  thesacredpath · Member · Apr 15, 2013 at 6:23 pm

  • Copy link

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