Navigation Bar Glitch on Mobile: Seeking Solutions for Clients | Relume Community

Navigation Bar Glitch on Mobile: Seeking Solutions for Clients

Hello, I've had this problem with one other client site and had to rebuild it to fix the issue as quick as possible - now it's happening again and I'm concerned it's an issue across any site I've used a Relume navigation bar. The mobile navigation has a glitch: when you click into the hamburger it expands fine, and if you click a link to go to a page that works fine as well. But if you 'x' out of the menu it disappears and then reappears again, with no 'x' to close it. You're just stuck in the menu. What could be happening, and why has this now happened twice (and possibly more) when using your navigation bars? This is the site it is currently happening, on the Home page, using a mobile or tablet device: https://www.berglundranchsupply.com/

17 comments

Emily M.
·
I can’t recreate the issue (on iPhone using Safari)
Erin B.
·
That's comforting! I am using Chrome. Thank you for checking Emily.
Emily M.
·
Ah yeah I just tried in Chrome and see the issue. It only seems to happen once, and then if I select a different menu item I can open and close the menu thereafter without problems. No idea if that’s helpful! Matt J. should be able to help
Matt J.
·
Erin B. Would you mind sending a read-only link?
Erin B.
·
Matt J. https://preview.webflow.com/preview/berglund-ranch-supply?utm_medium=preview_link&utm_[…]c10ad76ec74f93295b3a634e7e56bc86&locale=en&workflow=preview
Erin B.
·
Thank you for your attention on this, team! I'm certain it must be some small thing, but now that it's happened a few times it makes me nervous. Especially when it's the mobile version, people are so impatient with those kind of glitches
Matt J.
·
Erin B. there are 3 navbars on this site - is that correct? One on the homepage, that is not a component (green), that same navbar on interior pages, and then for interior pages only, a third navbar for mobile. Do I have that correct?
Erin B.
·
Hi Matt! You can see the issue with the one on the Home page when using a tablet or mobile device.
Matt J.
·
I would say that this is not at all an issue with our default Relume navbars. All 3 of these navbars have been heavily modified. Navbars are some of the most complex things to do in Webflow and you have 3 of them, so it makes this exponentially hard. I have loaded the site up on my device using multiple browsers, and have done several tests on my desktop as well and I have yet to reproduce the issue. Based on a few other things that I am seeing - I would guess its something to do with the interactions of the navbars. When I first load the page, the 3 lines are full width. When I interact and close the menu, the middle line is no longer full width. Another thing worth exploring is that it looks liek you have about 6-8 instances of different navbar interactions and a few duplicates on top of that. There's a chance that all of these interactions could be colliding with each other in some way though I doubt it. I would make a backup of your project before doing any cleanups (cmd + shift + s). You can use the cleanup tool for interactions to get rid of any that you are not using on your project (screenshot). I can certainly dig into this more at a later time, to see specifically what in the interactions might be causing this. Something with the "initial" states.
Matt J.
·
One tip would be to copy in navbar 4, or whatever other navbar these ones actually are, and compare settings to see what the differences are.
Matt J.
·
my biggest concern are the multiple navbars
Erin B.
·
Yes not ideal, but I was up all night trying to find a quick temporary solution.
Erin B.
·
I'll be rebuilding, but since this happened just recently with another navigation bar I wanted to know what was causing it so it wouldn't end up happening again.
Erin B.
·
Thank you for your time!
Matt J.
·
One tip also is to wrap the navbar component in two divs, name the top div navbar_wrapper and the second div just navbar and then turn this navbar div into a component. So you’ll have: navbar_wrapper navbar (webflow component) navbar_component (Relume navbar component) This might help reduce wonkiness as well. I apply ZERO styles to the navbar div. Erin B. did you have any custom CSS in the site?
Erin B.
·
No custom CSS no!
Erin B.
·
Very helpful tips, thank you Matt! Hopefully this won't happen again