Move navigation bar in the theme twenty twelve below header image.

• 

  teliofashionblog · Member · Mar 18, 2013 at 9:20 pm

  • Copy link
  • Add topic to favorites

  We are trying to move the homepage navigation on our blog so that it sits below the header image instead of above which is where it is now. Having the navigation above the header creates a disconnect for users, it interrupts the flow of the blog (people won’t notice it or click as much).

  Does anyone know how to do this?
  A wordpress customer service rep helped us achieve this to a degree but them other text also moved- she said “I’m running into some issues with things bumping each other down the page”.

  Here is the code she used to move the navigation up originally as a test- maybe this can help.

  /*
#site-navigation, .main-navigation {
top: 220px;
position: relative;
}

  img.header-image {
  position: absolute;
  top: 0;
  }

  #main, footer {
  position: relative;
  top: 200px;
  }

  .entry-header .comments-link {
  display: none;
  }*/

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

• 

  thesacredpath · Member · Mar 18, 2013 at 10:20 pm

  • Copy link

  Start with this and see what you think. I removed the top and bottom border lines from the menu and put it right at the bottom of the header image and the border extends the full width of the page rather than ending at the end of the menu items.

  .site-header {
  position: relative;
  }
  
  .main-navigation {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 275px;
  width: 100%;
  }
  
  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
  border: medium none;
  }
  
  #main {
  margin-top: 25px;
  }

• 

  teliofashionblog · Member · Mar 19, 2013 at 3:44 pm

  • Copy link

  Thank you! It works :)

• 

  thesacredpath · Member · Mar 19, 2013 at 4:07 pm

  • Copy link

  You are welcome.