Custom Navbar problem
Hello good people. I have a problem with the navbar in Webflow and I would be very grateful if anyone knows how to solve it. Namely, I do not use the Webflow navbar because I like to have more control. I prefer that when the hamburger icon is clicked, the menu becomes fullscreen and then, with a bit of JS, I disable scrolling when the menu is open. I also use a Lottie animation for the hamburger. My navbar always looked good and I managed to create various nice animations, but now I have a problem with the links inside that menu. These links always led to other pages and everything worked great, but now I have a situation where the links lead to a specific section on the page and I have a problem because when a link is clicked, it bugs out, scrolling is still disabled, and the menu does not disappear. I have tried different solutions with ChatGPT, but there is always something buggy, either the scrolling or the Lottie animation. Sorry for the long text. Thank you in advance for the response.
Here is the JS code I use to disable/enable scrolling when the menu is open:
<style>
.no-scroll {
overflow: hidden;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menu = document.querySelector('.menu');
menu.addEventListener('click', () => {
document.body.classList.toggle('no-scroll');
});
});
</script>
Here is the preview link: https://preview.webflow.com/preview/dragan-f3e1df544fe162c16cd717e7a0f?utm_medium=preview_link&utm_source=dashboard&utm_content=dragan-f3e1df544fe162c16cd717e7a0f&preview=38eac1c0bc4ba16304c0958b04787112&workflow=preview
1 Reply
a simple solution would be to use finsweet mirror click attribute. anytime a nav link is clicked, trigger a mirror click on the hamburger menu. this should trigger the menu close, lottie animation, and remove overflow hidden from body.