[Resolved] Switch nav to hamburger icon and sidebar below content at certain screen width?

[Jay]

Two semi-related questions…

1. On larger screens, I have my navigation links to the right of my logo in the header. On smaller mobile screens, I have the same layout, with the hamburger icon now appearing to the right of my logo. But on screen sizes somewhere in the middle, the navigation falls below the logo (because it can’t fit inline anymore at that width). Rather than have my nav ever fall below the logo like this, I want it to switch to the hamburger menu at that specific breakpoint (for the sake of example, let’s say it’s 1023px width). Is this possible?

2. Similarly, on larger screens I have content on the left and a sidebar on the right. On mobile screens, the sidebar moves below my content. I want to make this change happen sooner than it currently does… let’s say again at a screen width of 1023px. Is this possible?

Thanks!

[David]

Hi Jay,

this article explains changing the mobile menu break point:

https://docs.generatepress.com/article/mobile-navigation/

Is it possible to provide a link to the site so i can sort the right CSS fix for #2.

You can edit the original post and use the Site URL field for privacy.

[Jay]

Thanks David!

For #2, I actually just found something you posted in another thread (https://generatepress.com/forums/topic/change-breakpoint-of-left-sidebar/#post-590669) that appears to do the trick. I assume nothing about this needs to be adjusted since it’s doing what I need?

For issue #1, the code in the link you posted makes the mobile menu appear sooner, but it moves it below the logo instead of to the right of it. Can this be changed?

[David]

Glad you found that, yes shouldn’t see a problem, if it works on the site then all good.

For the other try removing the float rules, from the CSS – lines 13 – 16.

[Author]

Posts