Hello,
I’ve built a custom NavBar for my website and used Jquery Builder to make It more functional.
Nav open/close on menu button click built with native Webflow interactions.
Click on one of the nav links triggers a click on the menu button (to close the Nav) built with jquery.
The third functionality I’m trying to achieve is to close the Nav when you click anywhere on the page (when the Nav is open).
I know I can add a transparent background and close the Nav on click of the background, but that makes the rest of the page unclickable when the Nav is open. and I want it to remain functional.
What I tried to do with the help of Jquery Builder was to toggle a class of the page-wrapper.
that means every time the Menu button is clicked the class ‘.page-wrapper’ toggles into ‘page-wrapper.2’ and back. and when you click on ‘page-wrapper.2’ it mirrors a click on the menu button as well, which should close the menu and toggle the class of ‘page-wrapper.2’ to ‘.page-wrapper’
This is the script:
//Click menu button on Nav link or page-wrapper.2 click
$('.navlink, .page-wrapper.2').on('click', function() {
$('.menu-button').click();
});
//Toggle The page class on menu click
$('.menu-button').on('click', function() {
$('.page-wrapper').toggleClass('2');
});
You can also see it on the ‘before tag’ of the page.
For some reason, it is not working…
Hope I was clear enough. Thank you for any help.
Here is my read-only link
Here is the URL of the live site :https://betterwebland.webflow.io