[Resolved] Set Navigation Drop Point on Sticky header/menu

[lunatrix]

I have a sticky header set and when I look at the site on a tablet, it is still too wide to switch to the hamburger menu, but the last (far right) menu item is on the line below. How can I either (a) make it switch to the hamburger menu, or (b) drop the whole nav menu below the logo? I only want this to happen for smaller screens.

Thanks!

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Have you tried this option here?
https://docs.generatepress.com/article/navigation-drop-point/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[lunatrix]

Hi Leo,

Yes, I tried that already and it only works for the desktop width. Part of the issue might be that I am doing some non-standard layout with the sidebar (https://generatepress.com/forums/topic/set-min-width-for-mobile-layout/), but I don’t think the sidebar positioning should really have an effect on the drop point.

I’m seeing this behaviour between widths 769px to 1024px.

[Leo]

Can you link me to the site in question?

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[lunatrix]

I’m afraid I can’t – it’s on my local dev machine and is not accessible to the outside world.

Is it possible to force the hamburger menu for screens that are smaller than 1025px wide?

[Leo]

Are you using the mobile header feature?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[lunatrix]

Found it. I have enabled the mobile menu, but for devices with a width between 769px and 1024px, with a sticky header, the menu does not switch to the hamburger menu, and the menu is also not dropping below the logo (the main menu is set to float to the right). It drops correctly until I start to scroll and the header switches to the more compact sticky header. Once it switches to sticky the menu is no longer dropping below the logo.

[lunatrix]

I feel this is an issue with the way the sticky header/menu works. I am also seeing the same sort of behaviour on smaller screens with the hamburger menu. Before scrolling, the hamburger menu is positioned below the logo, but as soon as the sticky header engages, the hamburger menu jumps to the right. I expect it is the same thing that is happening with the non-hamburger menu, but in that case the menu is too long to fit on one line so it pushes some of the menu items to the next line.

[Leo]

I’m not saying you need to use the mobile header navigation. We can change the breakpoint with or without mobile header, just need to use different methods.

Would definitely be easier if you can duplicate the problem on a live server so I can provide the best solution possible.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[lunatrix]

I disabled the sticky header, and then followed the instructions here:

https://generatepress.com/forums/topic/sticky-top-bar-and-main-navigation/

I am only using the sticky header on desktop now, and I am happy with my results. Thanks for your time!

[Leo]

Awesome!

Let me know if you need another look 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts