Community forum for knowledge and support

Updated 5 days ago

Navbar Issue on Mobile Devices

Hi all, I could really use some help with a navbar issue.
I'm using a Relume Navbar_10 component in Webflow, and the mobile menu toggle (hamburger icon) works perfectly on desktop (including when resized down to mobile), but doesn’t respond at all on actual mobile devices — except for on the homepage, where it works perfectly.

Here’s what I’ve tried so far:

  • Reset the navbar back to the original Relume state
  • Removed all custom “Navbar Opens” / “Closes” interactions
  • Confirmed z-index, pointer-events, and no overlaps
  • The navbar is a component reused across pages

Despite this, the hamburger tap does nothing on iPhones and iPads on all pages except the home page.

Read-only:
https://preview.webflow.com/preview/design-your-life-d80cf9?utm_medium=preview_link&ut[…]9&preview=d5d636242a7a77941f0e179d57adec35&workflow=preview

Home page (working): https://design-your-life-d80cf9.webflow.io
Broken page (on mobile device): https://design-your-life-d80cf9.webflow.io/individual-coaching

Any chance this is something in the component structure that needs adjusting?
Anyone else encountered anything similar? I’d really appreciate any help. I’ve been deep in it for hours and still stuck.

Thanks so much in advance

Jon

M
J
19 comments

@Jon Moss hmm so far in my testing the menu works for me on mobile device.

on any and all pages

Hey @Matt, thanks for your quick response. Could you tell me what device and browser you used?

iPhone, Chrome - Mac, Chrome

hmmm, well that's got me scratching my head. I'm testing in Chrome on an iPhone 16 plus. I've cleared the cache and tried different broswers but keep getting the same result.

It's as if the hamburger menu is behind something that's preventing it from being tapped and opening.

Attachments
IMG_1770.PNG
IMG_1771.PNG

looks like you are in Safari though?

those screenshots, yes. But like I said, I've tried all mobile browsers

yeah, that was my immediate hunch as well - that it was being hidden - I noticed that the section right below some of the navbar had a z-index of 1 which could put it above things like the navbar

another trick to prevent weirdness with this is to wrap the navbar in a wrapper, I usually call it navbar_wrapper (clever, I know). Once you've done this, you could try adding a z-index of 99 or something just to see if that resolve it and then start to look for patterns as to why it would be hidden (again, sections below the navbar.

Lastly, I've been taught by some ex-Webflow employees to not turn the navbar element itself into a component, but rather, to wrap the navbar element in a div and call it navbar, and then turn that div into a component.

none of this will guarantee that it'll resolve your issues, but I've never ran into any issues when I've had my navbars structured this way after 100+ websites built. Navbars are complicated enough, chasing phantom bugs with them is the last thing we all need to be doing. 😉

navbar_wrapper
navbar (component)
navbar element

On the navbar_wrapper - that's where I would apply things like position sticky, z-index, or maybe different background colors based on what page its on. Leveraging CSS rather than components lets you pick and choose based on page what you want the navbar behavior to be.

and also, I'm aware that the navbar component was imported that way

That all sounds like great advice. I was starting to suspect that the issue was related to making the navarbar a component. I'll work through all those suggestions and hopefully an answer will come.

thanks for the help. Much appreciated

Just wanted to follow up on this. Turns out, the problem wasn’t anything to do with Relume, webflow or any other part of my design stack. It was aggressive VPN settings affecting certain functionality. 😳 Such a waste of time but pleased to have got to the bottom of it.

that is wild - thanks for providing some context on that

Add a reply
Sign up and join the conversation on Slack