Looking for assistance in integrating jQuery code to remove the "text-light" class when the side menu is open or when the navbar-toggler button is clicked.
$(document).ready(function() {
$(".sidebarNavigation .navbar-collapse").hide().clone().appendTo("body").removeAttr("class").addClass("sideMenu").show();
$("body").append("<div class='overlay'></div>");
$(".navbar-toggle, .navbar-toggler").on("click", function() {
$(".sideMenu").addClass($(".sidebarNavigation").attr("data-sidebarClass"));
$(".sideMenu, .overlay").toggleClass("open");
$(".overlay").on("click", function() {
$(this).removeClass("open");
$(".sideMenu").removeClass("open")
})
});
$("body").on("click", ".sideMenu.open .nav-item", function() {
if (!$(this).hasClass("dropdown")) {
$(".sideMenu, .overlay").toggleClass("open")
}
});
$(window).resize(function() {
if ($(".navbar-toggler").is(":hidden")) {
$(".sideMenu, .overlay").hide()
} else {
$(".sideMenu, .overlay").show()
}
})
})<nav class="navbar navbar-expand-md bg-body navbar-dark sidebarNavigation" data-sidebarClass="navbar-dark bg-light ">
<a class="navbar-brand" href="index.html"><img src="Media/David-Sanders-Logo-Transparent-White-Writing.png" width="210wh" class="img-fluid" alt="Responsive logo"></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse justify-content-center sidenav">
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="text-danger btn">Home</a></li>
<li class="nav-item"><a href="#" class="text-light btn">Portfolio</a></li>
<li class="nav-item"><a href="#" class="text-light btn">About</a></li>
<li class="nav-item"><a href="#" class="text-light btn">Services</a></li>
<li class="nav-item"><a href="#" class="text-light btn">Skills</a></li>
<li class="nav-item"><a href="#" class="text-light btn">Contact</a></li>
</ul>
</div>
</nav>Seeking help to incorporate this functionality into the existing jQuery code.