Community forum for knowledge and support

Updated yesterday

Closing Navbar Menu When Using Anchor Links

Hey everyone....i was wondering if anyone can help me out with navbar 4.

I'm having an issue where I'd like the navbar to close when using a nav link for an anchor on page.

I found 2 help threads in webflow forums but don't seem to have any luck getting them to work.
https://discourse.webflow.com/t/closing-nav-menu-properly-on-section-link/231815
https://discourse.webflow.com/t/anchor-links-wont-close-menu-tried-all-the-fixes/226717

Read only link: https://preview.webflow.com/preview/downlow?utm_medium=preview_link&utm_source=designe[…]w&preview=2e0b5e55d5f51685eecd3e61e5d17093&workflow=preview

Any and all help on this is greatly appreciated!

S
M
M
19 comments

you can try adding interaction to menu items to hide navbar on mouse click for mobile

@Saba Khadim no luck trying that

@Matt hey sorry to bother you…any info on this?

@Michael Schiano yeah Webflow makes this a giant pain and I really wish they would figure it out. I believe if you did something like /#overview - it should work - in Webflow Designer its going to open a new page, but when you publish it, it shouldn't.

@Matt so that solution only created an anchor same as assigning it directly. I'm looking to have the nav bar close on mobile after clicking a navlink button

@Michael Schiano can you share the published URL?

and yeah I understand the problem, I thought that was the solution but I'm now remembering another thing

okay so change it to just #overview and don't use Webflow's section anchoring dropdown.

Then use this custom JS in your head

<!-- start global -->
<script>
  function scrollToElement(selector, animationTime, offset) {
    const el = $(selector);
    $('html,body').animate({ scrollTop: (el.offset().top + (offset || 0)) }, animationTime || 0);
  }
</script>
<!-- endglobal -->
And let me know if that resolves it

I would be consistent with your anchors - it might not matter but it could - some are lowercase others are capital case.

thank you for the tip! will keep them consistent.
https://downlow.webflow.io/
Still no luck atm

@Michael Schiano I'm not seeing the custom JS I sent in your source, I'll keep looking but just wanted to confirm quick that you have that in there yeah?

ah I see you have in the footer, which is fine

@Michael Schiano I'm concerned that this custom JS might be interfering - was this a previous attempt at the same problem or for something else?

very sorry - I added to body by accident.

Got it in and it's only working with neighborhood button not others but everything looks the same

side not the buttons in nav desktop are different from button in mobile menu

they aren't all the same though when looking at the source

so yeah, just #overview with no backslash and you wont need the full URL but I understand you might be doing that so it works in designer

sorry my man...i'm cooked w little sleep and slacking on you. this solutions works perfectly - ur the best

naw all good! Glad we got it! 💪

Add a reply
Sign up and join the conversation on Slack