Community forum for knowledge and support

Updated 9 months ago

Relume Navigation Bar Glitch

At a glance

The community member is experiencing an issue with the mobile navigation on their website, where the menu disappears and reappears without an "X" to close it. This issue has happened on another site they worked on, and they are concerned it may be a recurring problem with the Relume navigation bar they used. The community members have tried testing the issue on different devices and browsers, and one community member has provided a read-only link to the site. The discussion suggests the issue may be related to the multiple heavily modified navbars on the site, and the community members have received suggestions to clean up the interactions, compare the navbar settings, and potentially wrap the navbar component in additional divs to reduce "wonkiness". There is no explicitly marked answer, but the community members seem to be working together to identify and resolve the issue.

Useful resources

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/

E
E
M
17 comments

I can’t recreate the issue (on iPhone using Safari)

That's comforting! I am using Chrome. Thank you for checking Emily.

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!

should be able to help

Would you mind sending a read-only link?

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

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?

Hi Matt! You can see the issue with the one on the Home page when using a tablet or mobile device.

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.

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.

my biggest concern are the multiple navbars

Yes not ideal, but I was up all night trying to find a quick temporary solution.

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.

Thank you for your time!

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.

did you have any custom CSS in the site?

Very helpful tips, thank you Matt! Hopefully this won't happen again

Add a reply
Sign up and join the conversation on Slack