const header = document.querySelector('header'); let lastScroll = 0; const scrollThreshold = 10; window.addEventListener('scroll', () => { const currentScroll = window.scrollY; if (currentScroll > lastScroll && currentScroll > scrollThreshold) { header.classList.add('small'); } else if (currentScroll === 0) { header.classList.remove('small'); } lastScroll = currentScroll; }); const hamburger = document.querySelector(".hamburger"); const navmenu = document.querySelector(".nav-menu"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("active"); navmenu.classList.toggle("active"); }); document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => { hamburger.classList.remove("active"); navmenu.classList.remove("active"); }));
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter