Links getting pushed off hidden navbar when it appears

My company’s website has a navbar that appears when you scroll down the homepage. Today we noticed that the links and company logo are getting pushed off the navbar depending on the size of the browser window. The company logo leads to the homepage, and we don’t want to delete it, but the size seems to be what’s causing the links to get pushed off. Does anyone have any ideas or can help with this issue? Thank you!

Here is my site Read-Only:

Hi @cassieh, we run into this also sometimes. Not sure if a proper solution, but some things that may help include:

  • make the logo slightly smaller;
  • reduce the spacing between the menu items (i.e. space off to right hand side of your drop downs);
  • I note the ‘nav2-hidden’ area has padding of 200px either side, a percentage based padding may help get around this until it re-formats to iPad (but do also note this may mean the menu sits outside any grid etc.);

Other solution may be to have the search area as an interaction based drop down (i.e. a button that reveals the search bar) to again just try to save some space.

These are probably more cheats than solutions but if something helps, awesome!

  • Dom

You can solve this problem by putting the nav in a wrapper. tested and working with your breakpoints. Just flex center the nav, and remove that 200px padding. After that all you have to do is set width 100% and max-width 1100 on the container. This will center it in the middle of the page without affecting it til it hits the breakpoint. You can play around with max-width and margins on the container to get the result you want and make it more responsive. Let me know if you need more help.
Cheers :smile: