Move menu below header image in Twenty Twelve

• 

  uberdish · Member · Dec 16, 2014 at 4:15 pm

  • Copy link
  • Add topic to favorites

  I’d like to move the primary menu below the header image and have it centered the way that it currently is on the test site. When I found a bit of CSS code to move the menu down, the slideshow that I have at the top of the homepage interfered with the dropdown menu. I’d like to find out if there is a clean way to swap the positions of the menu and header in Twenty Twelve. Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Dec 16, 2014 at 5:47 pm

  • Copy link

  Could you try the CSS given by @thesacredpath in this thread and see if it helps?

• 

  uberdish · Member · Dec 16, 2014 at 9:31 pm

  • Copy link

  Thanks for this. I did try that CSS, and the placement of the menu bar interfered with the slideshow directly below it on the homepage. The flyout menu wasn’t displaying properly.

• 

  thesacredpath · Member · Dec 19, 2014 at 2:34 pm

  • Copy link

  Hi @uberdish, let’s try the following. I’ve used a media query to limit this change to browser window/screen widths over 600px as that is when the minified menu for tablets and phones comes into play.

  @media screen and (min-width: 600px) {
  .main-navigation {
      position: relative;
      z-index: 10;
      top: 170px;
  }
  .header-image {
      position: relative;
      top: -70px;
  }
  }

• 

  uberdish · Member · Jan 4, 2015 at 11:08 pm

  • Copy link

  Thank you thesacredpath, that worked a treat!

• 

  thesacredpath · Member · Jan 6, 2015 at 7:04 pm

  • Copy link

  You are welcome.