I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?

This solution uses Vue.js to toggle the bulma nav component when viewing on mobile. I hope this helps others that are looking for an alternative solution.

JS

First, I add the cdn for Vue.js which can be found here https://unpkg.com/vue, and include an instance of Vue in the javascript.

new Vue({
  el: '#app',
  data: {
    showNav: false
  }
});

HTML

a. Wrap the nav section with the element "app" to make it reactive (this maps to the "el" property of the Vue instance).

<div id="app"> ... </div>

b. Update .navbar-burger using the v-on: directive to listen for the click event and toggle the data property showNav.

<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">

c. Update .navbar-menu using the v-bind: directive to reactively update the class attribute with the result of the showNav property.

<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">

Solution

I've included the entire solution in this jsfiddle

This may be an issue with the example given in the docs, I was able to get it working by adding ids to the .nav-toggle and .nav-menu.

<span id="nav-toggle" class="nav-toggle"> and <div id='nav-menu' class="nav-right nav-menu">

jsfiddle here.

So to get the example working, you'd have to add 'id's to the respective elements. I'd recommend deep diving into the docs though

(function() {
    var burger = document.querySelector('.nav-toggle');
    var menu = document.querySelector('.nav-menu');
    burger.addEventListener('click', function() {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    });
})();