I am facing an issue concerning the responsive navbar functionality on my website. The problem occurs when the screen width drops below 1024px. Initially, the navbar is designed to switch to a responsive mode upon clicking the burger menu, which is implemented using JavaScript. While this feature works correctly at first, it fails to function properly when navigating between pages (for instance, from the home page to the store page), and I am unable to determine the root cause of this malfunction. Below is the code snippet:
/* Here is the JavaScript implementation */
document.addEventListener('DOMContentLoaded', () => {
let responsiveMenu = document.querySelector('.responsive-navbar');
let body = document.querySelector('body');
let burgerBtn = document.querySelector('.burger-menu');
let responsiveLinks = document.querySelectorAll('.responsive-menu-links')
burgerBtn.addEventListener('click', () => {
burgerBtn.classList.toggle('cross')
responsiveMenu.classList.toggle('menu-open');
body.classList.toggle('disable-scroll');
responsiveLinks.forEach(link => {
link.classList.toggle('trigger-anim')
})
})
})
/* Included partial for _navbar.html.erb file */
<div class="navbar-header">
<div class="navbar-menu">
<%=link_to 'Home', root_path%>
<a href="">About Us</a>
<a href="">Contact</a>
<a href="">About Me</a>
<%=link_to 'Store', store_path%>
</div>
<div class="burger-menu">
<span></span>
<span></span>
<span></span>
</div>
<div class="responsive-navbar">
<div class="menu-background"></div>
<div class="menu-links">
<%=link_to 'Home', root_path, class: 'responsive-menu-links'%>
<a href="" class="responsive-menu-links">About Us</a>
<a href="" class="responsive-menu-links">Contact</a>
<a href="" class="responsive-menu-links">About Me</a>
<%=link_to 'Store', store_path, class: 'responsive-menu-links'%>
</div>
</div>
<div class="navbar-items">
<div class="logo">
</div>
</div>
</div>
/* Styling rules */
.trigger-anim {
animation: scaleIn .2s forwards;
}
.menu-open {
width: 100vw !important;
a {
opacity: 1 !important;
}
}
.disable-scroll {
overflow: hidden;
.home-container {
height: 100vh !important;
overflow: hidden !important;
}
}
.cross {
span {
&:nth-of-type(1) {
transform: rotate(40deg) translateY(20px);
}
&:nth-of-type(2) {
transform: translateX(500px);
opacity: 0;
}
&:nth-of-type(3) {
transform: rotate(-40deg) translateY(-20px);
}
}
}