How can I make my Webflow menu automatically close after clicking a menu item that links to another section on the page?
TL;DR
- Add custom code in Webflow Designer by noting the menu's class name, then embedding a script in the Footer Code section of Page Settings to automatically close the menu after a click.
- Save your changes, publish the site, and test to confirm the menu closes as expected when a link is clicked.
To have your Webflow menu automatically close after clicking a menu item linking to another section on the page, follow these steps:
1. Add Custom Code for Interaction
- Navigate to your Webflow Designer.
- Select the Navigation Menu element.
- Click on Settings (gear icon) and make note of the class name of your menu.
2. Embed Code in Settings
- Go to Page Settings.
- Scroll down to the Custom Code section.
- In the Footer Code area, add the following custom code snippet:
```javascript
<script>
document.querySelectorAll('.w-nav-menu a').forEach(item => {
item.addEventListener('click', () => {
// This targets the open menu
const menu = document.querySelector('.w-nav-menu');
if (menu && menu.style.display !== 'none') {
// Close the navigation menu
Webflow.require('ix2').actions.general.hide(menu);
}
});
});
</script>
```
- Replace
'.w-nav-menu'with your navigation menu class if it differs.
3. Save and Publish
- Save your changes.
- Publish your site to apply the changes.
4. Test the Functionality
- Visit your published website.
- Click on a menu item that links to another section of the same page.
- Observe if the menu closes automatically afterward.
Summary
Add custom JavaScript to your Webflow project to ensure the navigation menu closes automatically when a menu item for another section on the page is clicked.
