How to hide the navbar menu after clicking a button?

Hi, I am a student completing a course unrelated to web design so I kinda feel out of place among the pros here hahaha.

Anyways, I’m having issues making my navbar dropdown menu dissappear after clicking on the navigate button. My navbar menu is only shown on desktop screen, if not it hides behind the hamburger icon from tablet screen and below. As the dropdown menu takes up the whole screen, I managed to set the trigger for the dropdown menu to appear and disappear after clicking on the hamburger icon. So right now when i click on my navigate button, it brings me to where i want to be but the dropdown menu is still there as it takes up the whole screen.

Is there a way for the dropdown menu to dissappear after i click on the navigate button? I tried to add a mouse click trigger for the menu to hide the dropdown menu but it doesn’t really work the way I want it to.


Here is my public share link:
https://preview.webflow.com/preview/pwarch?utm_medium=preview_link&utm_source=designer&utm_content=pwarch&preview=d825a64353ef5360ffac54ad75ed3c97&mode=preview

Hey there!

Welcome to the Webflow community. We’re glad to have you.

What dropdown menu are you referring to? Whenever I click on the “Navigate” button, I am taken down to the ‘address’ section of the page, and then the entire menu disappears.

If you can give me a step-by-step of what happens when the user clicks the navigate button, I would be happy to assist on how to best setup your triggers! :slight_smile:

Hi!
This is the dropdown menu I meant. It takes up 100vh in tablet px and below.

The entire menu disappears because I added a trigger element to the navigate button so that when it is clicked, the entire menu disappears. I realised this won’t work because the navbar menu does not reappear after I click on the hamburger icon again.

If I didn’t add the trigger, everything works fine except when I click on the navigate button, it brings me to the address section but the navbar menu does not go back up automatically unless I click the hamburger icon again. I want to find a way for the navbar menu to be hidden once I click on the navigate button. I just removed the element trigger for the navigate button so you can view the issue. Hope I explained it properly :sweat_smile:

Okay yeah I see what you’re saying. I think I have a solution:

  1. Create a copy of the “Navigate” button that only displays on Tablet and below (meaning the original Navigate button would only display on desktop).

  2. From there, instead of having the button link to a section, have it link to an “external” domain (but it won’t really be external). Your domain should look like: yourdomain.com/#section-name.

Basically, what this is going to do is to force the page to reload, thus resetting your animation, while still taking you to the section you want on the page. I couldn’t really test this because I can’t see your actual domain on the site, but in theory it should work.

Please let me know if I was wrong… I will try to come up with something else from there :stuck_out_tongue:

Happy devsigning! :slight_smile:

Thanks for your suggestion @TylerCourts !

I tried out your instructions but unfortunately it does not force the page to reload. It still brings the page to the particular section like the normal section link.

I’m having this same issue. Has anyone found a solution?

For those looking to hide the navbar in Webflow, I’ve crafted a custom code snippet that can help. This script is designed to automatically hide the navbar when any navigation link is clicked. Tweak this code to fit your project requirements better.

Here’s the code:

<script>
// Select all navigation links
const navLinks = document.querySelectorAll('a.w-nav-link');
  
// Add a click event listener to each link
navLinks.forEach(el => el.addEventListener('click', event => {
  // Trigger a click on the navbar button to hide the navbar
  document.querySelector('.w-nav-button').click();
}));
</script>