Navbar menu floating off page on tablet

Hey community! Seeing a weird bug that’s not showing up in webflow designer, but only in production specifically on Tablet (ipad).

Our navbar menu is no longer at the top where it should be and is just floating in the middle of the page:

Anyone know what could be causing this?

Cheers!
Sam

Read only site

Hi @hey_skelly

Really difficult to say. On Webflow everything looks fine. I checked the website on a few browsers and my iPhone. All seems to be fine. :man_shrugging:t2:

Hey Sam,

A few tips for debugging these weird edge-cases;

  • Try chrome browser on the device, see if it behaves differently
  • If it does, try using a desktop version ( if it exists ) of the device’s browser you’re seeing the problem on, see if you can reproduce it

Your goal is to find a setup where you can see the problem, but have good debugging tools like chrome devtools available.

Android Chrome has a way to connect a PC to the device, and do full browser testing. You might need to find a similar setup if you’re only seeing this on Safari on iPad. It’s a pain to setup, but it’s the only way to see what’s happening.

Also… Webflow navs are already “weird”, in that it’s common to mix different layout models that were never meant to integrate well. Navs use float, plus relative and absolute positioning, and z-index to make the menus work. A number of those styles change only by script at runtime.

Add a grid layout, flex, sticky… you’ve got a hot sticky mess that some browsers will gag on.

One option is just ditch Webflow’s nav and roll your own but of course that only works for very simple navs or else you need to do a fair bit of work.

It might be feasible to ditch the Nav itself, and just build one using dropdowns instead, but you’ll likely end up with a duplicate set of menu items for the mobile hamburger breakpoint. That at least eliminates the float aspects, without having to build your dropdown menu solution.

Maybe try this to find the bug in the CSS:
" On the ipad go to Settings > Safari > Advanced and activate the Web Inspector.

Connect your ipad with your computer.

On your computer open Safari, enable the developer tools in the settings. check the above menu for the tab Developer and find your iPad there.

Full control via console from your desktop machine over the iOS Safari and you’re done!"

Thanks so much @memetican and @mkukulka ! So looks like it’s not a tablet issue but just Safari browser on our larger breakpoints…

Not sure what’s causing this but going to do some debugging and maybe rebuild the desktop layout version.

Try to change Height from 100% to Auto.


@mkukulka you’re a legend!! That fixed it. Thank you so much!

“legend” :grin:

Thank you. Good luck with your nice initiative :slight_smile:

1 Like