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

html css nav bulma

37,937

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

To make the toggle click event work, just add the below js code. You may create a JS folder, then bulma.js file.

// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
(function () {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('#' + burger.dataset.target);
    burger.addEventListener('click', function () {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    });
})();

At the end of your html page add the script. ex:

<script async type="text/javascript" src="./js/bulma.js"></script>

Solution 5

You can get it to work without using jquery or bulma.js. Just simply use your own javascript to add is-active to nav-menu class on click on nav-toggle.

nav-menu is collapsed.

nav-menu is-active is expanded.

I thought someome might be looking for a solution without jquery so there will be everything in one place.

View more solutions

37,937

moge

Updated on October 23, 2021

Comments

moge over 2 years

I'm new on bulma css http://bulma.io/

I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/

But it doesn't work. What should I add ?

Actually, I can see hamburger menu, but it doesn't work when I am click it.

Thank you.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <title>test</title>

        <link rel="stylesheet" href="css/bulma.min.css">
        <link rel="stylesheet" href="css/custom.css">
    </head>
    <body>
        <section class="hero is-fullheight is-primary is-bold">
            <!-- Hero header: will stick at the top -->
            <div class="hero-head">
                <header class="nav">
                    <div class="container">
                        <div class="nav-left">
                            <a class="nav-item" href="/">
                                <img src="img/logo.png" alt="Logo">
                            </a>
                        </div>
                        <span class="nav-toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                        <div class="nav-right nav-menu">
                            <a class="nav-item" href="/about">
                                About
                            </a>
                            <a class="nav-item" href="/path">
                                Path
                            </a>
                            <a class="nav-item" href="/blog">
                                Blog
                            </a>
                        </div>
                    </div>
                </header>
            </div>
            <!-- Hero content: will be in the middle -->
            <div class="hero-body">
                <div class="container has-text-centered">
                </div>
            </div>
        </section>
    </body>
</html>

Parthipan Natkunam over 7 years

This should work just out of the box for bulma css. Please check if you have the minified css file at the correct path. You may also use the CDN option. CDN link for bulma is here.
moge over 7 years

Umm, I'm sure this is the correct path. In addition, I also tried to CDN, it didn't work for me.

moge over 7 years

I tried it already, but it didn't work. The thing what I would like to know is the file I should import is only bulma.css ? I mean I thought I should import jquery or something.
semuzaboi over 7 years

well.. you should import jquery and the bulma.js . the click events for the nav are in bulma.js
moge over 7 years

Finally, it works!! Thanks a lot. I was misunderstanding that bulma css is working only css
moge over 7 years

I did it! Thank you very much:)
Donald Duck almost 7 years

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
JeffBeltran almost 7 years

came here from google and wanted to add to your answer since nav will be deprecated soon on Bulma. If you are using the navbar example just need to add :class="{ 'is-active': showNav }" @click="showNav = !showNav" to the navbar-burger tag and also :class="{ 'is-active': showNav }" to the navbar-menu
tbonz over 6 years

Thank you @JeffBeltran! I've updated my solution to use the latest version of bulma.css and the navbar component.
Ruggero Rebellato over 6 years

Oh i'm sorry, just starting to help people around here... so i'll try to explain for anyone(thinking about long term): We need to query(remember jQuery? no need to use it anymore) the nav-toogle and nav-menu, store them in variables(read about reference type), after that start to listen to events on the "burger" in this case, a mouse click or touch on the screen. When the click happens it'll toggle the class 'is-active'. this function is a self executing function, what means it is executing from the moment the page is loaded.
Okarin over 6 years

Unfortunately, it doesn't, because it doesn't seem to work even with this. I'm afraid there's just something wrong with Bulma itself.
AndyBobandy over 6 years

@Okarin Hmmm, mine works with just the changes above. Another issue I found when I was working on this: I hadn't set my viewport meta field in the HTML header. If you don't have the viewport set, none of the built in responsiveness will work. Try adding this to the header of your html file: html <meta name="viewport" content="width=device-width, initial-scale=1.0"> I'd have to see your code to really help you though.
Antonio Brandao about 6 years

A pity that your example relies on jQuery.
doublea about 6 years

Can you add to your solution to make the navbar slide down when it's clicked? I've tried adding a transition wrapper around navbar-menu but can't seem to make it work.
tbonz almost 6 years

@doublea I've looked at trying to add this, but only found that you cannot apply a transition to elements that have display: none. CSS is not my strong suit and so hopefully somebody else could offer a solution.
Riscie about 5 years

thanks for this answer. Using it I was able to adapte the logic for angular, which I have posted below.
DeltaFlyer over 3 years

@RuggeroRebellato: why use an immediately invoked functionaly expression (IIFE)? Will its use allow this functionality as soon as the page loaded? In that case, why not just use the onLoad/load event listener?