Skip to content

Toggle mobile menu

Toggles mobile menu layout and decides whether to show the menu button. Is-clicked class transforms button look from burger to x

Tags that this post has been filed under. Links open in the same window.

let toggleButton = document.querySelector('.header-menu-toggle');
let nav = document.querySelector('.header-nav-wrap');

function showButton(){
if (window.innerWidth < 800){
toggleButton.style.display = 'block';
toggleButton.style.position = 'absolute'
}else{
toggleButton.style.display = "none";
}
}

function mobileMenu() {
toggleButton.addEventListener('click', function(){
if (!toggleButton.classList.contains('is-clicked')){
nav.style.display = "flex";
nav.style.position = "absolute"
nav.setAttribute('aria-hidden', 'false');
toggleButton.classList.toggle('is-clicked');
}else{
nav.style.display = "none";
nav.style.position = "relative"
nav.setAttribute('aria-hidden', 'true');
toggleButton.classList.toggle('is-clicked');
}});
}

mobileMenu();
window.addEventListener('load', showButton);
window.addEventListener('resize', showButton);