- This topic has 10 replies, 2 voices, and was last updated 3 years, 11 months ago by Leo.
April 19, 2019 at 4:55 pm #873861lunatrix
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.2GP Premium 1.7.8April 19, 2019 at 6:08 pm #873885LeoStaffCustomer Support
Have you tried this option here?
Let me know 🙂
Adding CSS: http://docs.generatepress.com/article/adding-css/April 19, 2019 at 6:35 pm #873901lunatrix
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.April 19, 2019 at 7:05 pm #873910LeoStaffCustomer Support
Can you link me to the site in question?
Let me know.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 19, 2019 at 7:10 pm #873913lunatrix
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?April 19, 2019 at 7:18 pm #873914LeoStaffCustomer Support
Are you using the mobile header feature?
Adding CSS: http://docs.generatepress.com/article/adding-css/April 19, 2019 at 7:34 pm #873922lunatrix
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.April 19, 2019 at 7:50 pm #873929lunatrix
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.April 19, 2019 at 7:56 pm #873931LeoStaffCustomer Support
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.
Adding CSS: http://docs.generatepress.com/article/adding-css/April 20, 2019 at 7:34 am #874306lunatrix
I disabled the sticky header, and then followed the instructions here:
I am only using the sticky header on desktop now, and I am happy with my results. Thanks for your time!April 20, 2019 at 10:40 am #874440LeoStaffCustomer Support
Let me know if you need another look 🙂
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.