Having developed a responsive navbar, an issue arises during iPad breakpoints where attempting to close the active navbar by clicking the hamburger icon triggers the jQuery script to also perform .removeClass(".active").slideToggle() on two buttons, causing them to disappear instead of remaining visible.
To clarify further: On iPad breakpoints, there are two buttons alongside a hamburger icon. Opening the navigation elements upon clicking the hamburger icon works correctly. However, upon closing the .nav-item:active elements, the .nav-item btn elements vanish, creating a disruption in functionality.
You can view the code example here:
https://codepen.io/kingersnotepad/pen/YzVYVpp
Additionally, here is the HTML & jQuery code snippet:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$(".toggle").on("click", function() {
if ($(".nav-item").hasClass("active")) {
$(".nav-item").slideUp().removeClass("active");
} else if ($(".ham1").hasClass("active") && $(".nav-item btn").hasClass("active") && $(".nav-item").slideUp().removeClass("active")) {
$(".nav-item").slideUp().removeClass("active").not(".btn");
} else {
$(".nav-item").slideDown().addClass("active");
}
});
});
</script>
<head>
<body>
... (HTML markup continued)
And here is the accompanying CSS:
/* CSS styles included for reference */
... (CSS styles continued)
If anyone has insights or recommendations for resolving this issue, it would be greatly appreciated.
Thanks!