First time posting a question here so please be kind :)
I added the following script to change the css of my navbar when scrolling.
window.addEventListener("scroll", function () {
let header = document.querySelector(".navbar");
let windowPosition = window.scrollY > 0;
header.classList.toggle("change-bg-nav", windowPosition);});
This is the CSS for the class
.change-bg-nav {
box-shadow: var(--box-shadow);
background-color: rgb(255, 255, 255, 0.9) !important;
backdrop-filter: blur(5.5px);}
Effect works great, when I scroll on any device size the css of the navbar changes as expected. Now I'm looking to achieve the same effect when I'm on a smaller device and click on the hamburger icon to expand the menu ** but without having scrolled**. I've tried mediaqueries but that doesn't give me the desired result. Any suggestions for how to approach this?
The code for my nav
<nav class="navbar navbar-expand-lg navbar-light bg-light px-3 mb-5">
<div class="container-fluid">
<a class="navbar-brand" href="/">Brand name</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/about.html">About</a>
<a class="nav-link" href="/about.html#contact-me">Contact</a>
</div>
<div class="navbar-nav social-media">
<a href="#" target="_blank" class="nav-link social"><i class="fab fa-twitter px-1"></i></a>
<a href="#" target="_blank" class="nav-link social"><i class="fab fa-linkedin-in px-1"></i
></a>
</div>
</div>
</div>
</nav>
Hook into the Navbar Collapse events to toggle the change-bg-nav class...
let header = document.querySelector(".navbar");
header.addEventListener('show.bs.collapse', function () {
header.classList.toggle("change-bg-nav");
})
header.addEventListener('hide.bs.collapse', function () {
header.classList.toggle("change-bg-nav");
})
For mobile devices, I think you should use another strategy. ie.
if(hamburger.clicked) {
// add bg navber color.
}