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:
Hey @Matt, thanks for your quick response. Could you tell me what device and browser you used?
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.
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.
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.
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.
