iPad Landscape (1024) show Mobile menu from (768)

Hi

Can anyone help with this issue? I can’t seem to get it working.

Basically, when the user is using an iPad landscape (1024px) I want to show the menu that is shown on iPad portrait (768px breakpoint) and not the standard desktop menu.

Thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

When you have your menu selected, click on the gear icon. You’ll see an option as to which breakpoint the mobile menu is shown. By default I think it appears at mobile landscape, but you can change that to appear on tablet, or even on the desktop breakpoint.

image

@memetican

Thanks for that, but it won’t let me set and breakpoint size (ideally 1024) It seems that the only break points I can use are the ones that are already defined in Webflow? I was thinking some custom code may work to hide the desktop menu and show the mobile menu on 1024?

Wow. I had always thought that Webflow supported custom breakpoints, but yes, I see exactly what you mean.

If you’re hosting this yourself, you can just search/replace the 991’s with 1024’s to expand that tablet breakpoint slightly. But if you’re wanting to use Webflow’s hosting then that’s not an option, so you’ll essentially create your own “nav toggle breakpoint” in CSS.

Here a demo site where I’ve created a 1024 mobile nav breakpoint;

A CodePen with my example CSS;

And a walkthrough on how to create that CSS for your own nav;

1 Like

Hey memetican

Thank you so much for sending all this information over. I haven’t had a chance to try and implement it yet, but I will update you once I have :slight_smile:

Hey memetican

I have added the code to the page and it does show part of the menu in 1024 but only the drop down and not the nav links. Is this possibly how I have but the nav?

https://aspireshutters.webflow.io/

Hey Michael, just saw this;
I’m not seeing your code but here are some general thoughts-