I have recently designed a responsive navigation bar for my website, but I am encountering an issue. When the user reduces the browser size and tries to click the hamburger icon on the side, the navbar does not work as expected. The user needs to refresh the page in order to successfully click the hamburger icon and view the navbar in the reduced screen size. I have attempted to troubleshoot this problem without success. Can anyone provide guidance on how to ensure that the navbar functions properly when the screen is resized, eliminating the need for the user to refresh the page? Any assistance would be greatly appreciated. Below is the code snippet:
$(document).ready(function () {
if (window.matchMedia('(max-width: 767.98px)').matches) {
$(".navbar-toggle").click(function () {
$(".navbar-toggle").toggleClass("cross");
$("#navbarToggle").toggleClass("active");
$("body").toggleClass("overflow-hidden");
});
}
});header {
-webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
-moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
position: relative;
z-index: 999;
transition: 0.6s;
}
/* header fixed on top with transition */
header.fixed-top {
-webkit-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
-moz-transition: .4s;
transition: .4s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
-moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
}
header .navbar-brand {
padding: 0.5rem 0;
}
/* dropdown open on hover css start*/
.dropdown:hover > .dropdown-menu-hover {
display: block;
}
.dropdown-menu.dropdown-menu-hover {
...
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src="script.js"></script>
</body>
</html>