Menu bar messed up in mobile and tablet view

• 

  thecheesyindian · Member · Dec 26, 2014 at 9:42 am

  • Copy link
  • Add topic to favorites

  Hello,

  I want my primary menu bar to be aligned centrally, but that is making my menu bar look messed up on tablet and mobile. As soon as I remove the central alignment on my top menu bar, the tablet and mobile layout returns back to normal.

  Is there any way I can fix this?

  Thanks.

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

• 

  thesacredpath · Member · Dec 26, 2014 at 4:45 pm

  • Copy link

  Hi there, with display inline-block on the ul element things can sometimes shift, which required your 40px of height on .navigation-main. That is what was causing the issue with the messed up view when it went to two or more lines on narrower screens/windows. Let’s remove the height from .navigation main and then include a negative bottom margin on the ul rule like this.

  .navigation-main {
      text-align: center;
  }
  .navigation-main ul {
      display: inline-block;
      margin-bottom: -4px;
  }

  See what you think of that. It all appears to work fine with the above for me.