Navbar 1 Mobile Issue: Menu Fails to Close on Anchor Links

·Sep 18, 2024 01:46 PM

Minor but cumbersome issue using “Navbar 1” in Webflow on mobile (“hamburger mode”). Maybe not a common set up, but if any menu items are anchor links on the current page, instead of leading to other pages, the menu does not close when clicked.

15 comments

· Sorted by Oldest

André M.
·
Perhaps this has more to do with Webflow’s “Navbar Component” that is being used? Seems like the interactions are tied to it’s own custom triggers.
André M.
·
But curious if anyone else has run into a solution for this issue?
André M.
·
Yeah, this is more of a WF thing. Their NavBar doesn’t really handle this.
Jakub M.
·
I may be wrong but its kinda not what the menu-component is for. It supposed to have have relevant links to all the pages as this it's purpose. therefore you may noticed the stated current when having the link of the current page checked in the status dropdown where you can edit hover status etc styles which in Webflow is only occurring in the child elements of the menu-button component. there is JS code behind it if you want to dive deeper into that
André M.
·
How can I see the JS code?
Jakub M.
·
if you want to anchor an element or sections within the same the screen readers read the link as empty vs if you paste https: link instead with the url mywebsite.com/#service-1
Jakub M.
·
only by Inspecting the published site or maybe Webflow will share it with you. I haven't tried to ask them yet, it may be a good idea to try actually 😉
André M.
·
ah
André M.
·
TLDR My main nav menu has a combo of page links as well as “Section” links to specific sections of the home page.
André M.
·
The behavior of these links is inconsistent depending on which page you’re currently on.
André M.
·
I want to keep the navbar as a component, so I don’t want unique elements on each page.
André M.
·
So my solution was to actually set up several link properties on my Component, and assign them to the nav menu items. That way, I can change the link properties on each page without breaking the Component usage.
André M.
·
It mostly works. There is a weird bug. If I’m in the editor, the links assigned to URLs always open in a new tab even if set not to in the current one. Thankfully, this does not cary over to the published site.
Matt J.
·
yeah Webflow handles section links differently and poorly unfortunately. I think the way you are handling it is actually pretty smart - might have to look into this more.
André M.
·

Navbar 1 Mobile Issue: Menu Fails to Close on Anchor Links | Relume Community

André M.
·
Perhaps this has more to do with Webflow’s “Navbar Component” that is being used? Seems like the interactions are tied to it’s own custom triggers.
André M.
·
But curious if anyone else has run into a solution for this issue?
André M.
·
Yeah, this is more of a WF thing. Their NavBar doesn’t really handle this.
Jakub M.
·
I may be wrong but its kinda not what the menu-component is for. It supposed to have have relevant links to all the pages as this it's purpose. therefore you may noticed the stated current when having the link of the current page checked in the status dropdown where you can edit hover status etc styles which in Webflow is only occurring in the child elements of the menu-button component. there is JS code behind it if you want to dive deeper into that
André M.
·
How can I see the JS code?
Jakub M.
·
if you want to anchor an element or sections within the same the screen readers read the link as empty vs if you paste https: link instead with the url mywebsite.com/#service-1
Jakub M.
·
only by Inspecting the published site or maybe Webflow will share it with you. I haven't tried to ask them yet, it may be a good idea to try actually 😉
André M.
·
ah
André M.
·
TLDR My main nav menu has a combo of page links as well as “Section” links to specific sections of the home page.
André M.
·
The behavior of these links is inconsistent depending on which page you’re currently on.
André M.
·
I want to keep the navbar as a component, so I don’t want unique elements on each page.
André M.
·
So my solution was to actually set up several link properties on my Component, and assign them to the nav menu items. That way, I can change the link properties on each page without breaking the Component usage.
André M.
·
It mostly works. There is a weird bug. If I’m in the editor, the links assigned to URLs always open in a new tab even if set not to in the current one. Thankfully, this does not cary over to the published site.
Matt J.
·
yeah Webflow handles section links differently and poorly unfortunately. I think the way you are handling it is actually pretty smart - might have to look into this more.
André M.
·