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

Relume Community Icon

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

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?