Bulma Navbar Toggle With Pure Javascript



How To Toggle Bulma Navbar With Pure Javascript

Well, here it is...

const navbar = document.querySelectorAll('.navbar')[0];
const navs = navbar.querySelectorAll('a');
const burger = document.querySelectorAll('.navbar-burger')[0];
const menu = document.querySelectorAll('.navbar-menu')[0];

burger.addEventListener('click', function(e) {
  burger.classList.toggle('is-active');
  menu.classList.toggle('is-active');
});

for (var i = 0; i < navs.length; i++) {
  if (!navs[i].classList.contains('navbar-burger')) {
    navs[i].addEventListener('click', function() {
      if (burger.classList.contains('is-active')) {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
      }
    });
  }
}

Thanks for reading. x

Resources