Moving menu to header in Trvl theme

• 

  kingfinkmusic · Member · Dec 3, 2013 at 4:22 am

  • Copy link
  • Add topic to favorites

  Hi,

  I am trying to move the Menu bar from the footer to directly under the title while using the Trvl theme. I have purchased the Custom Design upgrade so I have CSS editing. Could anyone help me with the CSS code to move the menu to a new location? Thanks.

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

• 

  thesacredpath · Member · Dec 6, 2013 at 10:23 pm

  • Copy link

  Hi there, give the following a try and see what you think. Down to 602px in width, the menu is horizontal. At 601px width, it changes to a vertical menu (part of the responsive width theme design), but I’ve kept the menu at the top and made adjustments so spacing is correct down to portrait smart phone width.

  #page {
  position: relative;
  }
  
  .navigation-main {
  position: absolute;
  top: 200px;
  width: 100%;
  }
  
  @media screen and (max-width: 1005px) {
  .navigation-main {
  top: 150px;
  }
  }
  
  @media screen and (max-width: 601px) {
  .navigation-main {
  top: 150px;
  }
  .hentry {
  margin-top: 70px;
  }
  }
  
  @media screen and (max-width: 321px) {
  .navigation-main {
  top: 250px;
  }
  }