Streaming live at 10am (PST)

How to Show Tablet Navigation on iPads and Small Screens


#1

Hi all,

I just found out I have an issue on multiple live sites with the iPad version of the sites. From looking through the forums, I see that iPad uses the desktop resolution rather than the tablet nav. I see there are some solutions using code but they are pretty complicated and will take me a long time to make my various affected sites iPad compatible.

Is it possible to set the tablet navbar settings to cover iPads? So the hamburger on everything under 1024px would work I think.

This affects most my work in webflow to date so any suggestions would be greatly appreciated. Is it something that can be set in the nav bar settings custom attributes? Basically I wish to show the hamburger navigation on all sites under 1024px. Screenshot attached

Thanks a lot,

Niall

.screen


#3

The solution suggested here (Responsive Breakpoint for iPad) won’t work as I have need to use interactions on the nav. On desktop the nav is already set to none to allow for the interactions. So when I use the below code, the interactions cancel out.

@media (max-width: 1024px) { #desktop-nav {display: none;} #mobile-nav {display: block;} }

Edit: This is solved now using a variation of the code.