Shahjahan Sarfraz• 270
@Jahan-Shah
Posted
Hey Henry 👋, Congratulation on solving this challenge
-
To add blur in the background when the nav is open you can add a div (backdrop) behind the nav with 100% width and height and then add blur to that div.
-
To stop scroll when nav is open you can modify you js function like this:
const menuButton = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const body = document.querySelector("body");
let isNavOpen = false;
menuButton.addEventListener("click", () => {
isNavOpen = !isNavOpen;
if (isNavOpen) {
body.style.overflowY = "hidden";
} else {
body.style.overflowY = "auto";
}
menuButton.classList.toggle("is-active");
navLinks.classList.toggle("is-active");
body.classList.toggle("blur");
body.classList.toggle("fixed");
});
I hope this will help
Happy Coding 👨💻
1
