[Resolved] Menu options

[heliosmp]

1.) The website is currently in development process offline. Since the menu button texts are quite long, the menu bar is going to be quite wide. How can I avoid the menu bar dropping down in two rows?
Is there a way to add the “hamburger” icon whenever the menu is too wide for the screen, and hide in the “hamburger tab” only those menu buttons that are now jumping in second row?
How to solve this issue?
PS:. I don’t want to use a slideout option for smaller resolutions. I find slide-down menu more suitable for my purpose.

Full size
1250px
870px
720px

2.) Also I would like to have site navigation centered, and the “hamburger icon” aligned to the right in mobile view.

Thank you for all your help! I really like your theme and premium addons.

[Tom]

Hi Marko,

There’s no real way to only add the items that are dropping down to a second row to the “hamburger” menu, but you can choose when to show the mobile menu, so you can initiate it at an earlier time than normal.

This CSS should do it: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Just change the 1000px to whatever width necessary for you.

If you need it so only the second row items show up in a mobile menu, there may be a jQuery script out there that does it, but I’ve never stumbled across/heard of it.

Let me know if you have any other questions 🙂

[heliosmp]

Hi Tom!

Finally figured out how to operate with this custom CSS. Is there a way to also add the search button on the right in tablet view? Now it disappears between 1000px and 740px.

Thank you for all your help.

[Tom]

I just updated the code to be more current: https://gist.github.com/generatepress/c23aef2d05807c39bb32

It should display the mobile search icon in the navigation now 🙂

[Author]

Posts