Move main navigation menu down to appear below site logo

• 

  lilredkoopa · Member · Feb 24, 2017 at 6:26 pm

  • Copy link
  • Add topic to favorites

  The main menu on my site usually appears to the side of the logo, unless the browser is on the smaller side. I’d like it to always appear below the logo, if possible.

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

• 

  thesacredpath · Member · Feb 25, 2017 at 1:15 am

  • Copy link

  Hi there, it seems like you have gotten this taken care of as I’m seeing the menu below the logo at all window widths. Let me know if you need additional help on this.

• 

  lilredkoopa · Member · Feb 25, 2017 at 6:11 pm

  • Copy link

  Thanks for the reply!

  I changed the logo to always have a height of 100 pixels, which moves the menu down. But it’s not a favorable solution, as it distorts the logo on smaller screens.

  I’d like the logo to have a max height of 100 pixels, but I’ve tried it like so:

  .site-logo {
  max-height: 100px !important;
  }

  and its height still ends up inconsistent as you click from page to page. The only max height I can get to work consistently is 72 pixels, but that’s where the menu ends up to the side of the logo. Is there a way I can use .main-navigation or another element to ensure that the menu is always below the logo?

• 

  thesacredpath · Member · Feb 26, 2017 at 6:51 pm

  • Copy link

  We can set the parent div of the logo to 100% width which will force the menu below the logo like this.

  .site-branding {
  	width: 100%;
  
  }

• 

  lilredkoopa · Member · Feb 26, 2017 at 9:12 pm

  • Copy link

  Worked like a charm! Thank you so much!

• 

  thesacredpath · Member · Feb 26, 2017 at 9:25 pm

  • Copy link

  You are welcome.