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');
});
})();