Bulma: Unable to get hero nav hamburger menu to work
Bulma Version: 0.28
Browser: Tested Chrome & Safari
Description
I'm unable to get the hamburger menu to work in hero->nav
I originally used the example under hero, and have tried mimicking the html used on https://github.com/jgthms/bulma-website
Steps to Reproduce
<body>
<section class="hero is-dark">
<div class="hero-head">
<div class="container">
<nav class="nav">
<div class="nav-left">
<a class="nav-item" href="/"><img src="images/logo-small.png" alt=""></a>
</div>
<span id="nav-toggle" class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div id="nav-menu" class="nav-right nav-menu">
<a class="nav-item is-active" href="/">Home</a>
<span class="nav-item"> <a class="button is-primary" href="#linkhere"><span class="icon"><i class="fa fa-shopping-cart"></i></span><span>Buy</span></a></span>
</div>
</nav>
</div>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">hero text</h1>
</div>
</div>
</section>
...
</body>
Any help would be appreciated. I ran through the examples a couple times and checked everything to make sure I wasn't missing a tag or something. The result is that the hamburger menu appears, but clicking it has no effect.
I put a sample page in index.html of https://github.com/rudedogg/bulma
rudedogg
All 30 comments
Same problem here.
patrickbolle
on 8 Jun 2016
Yeah you simply need a JS event to handle the click and "add" or "remove" the '.is-active'-class on '#nav-menu'.
saschalichtenstein
on 8 Jun 2016
Thanks! I thought it must be some fancy css animation or something and I just had the wrong html.
<script type="text/javascript">
document.getElementById("nav-toggle").addEventListener ("click", toggleNav);
function toggleNav() {
var nav = document.getElementById("nav-menu");
var className = nav.getAttribute("class");
if(className == "nav-right nav-menu") {
nav.className = "nav-right nav-menu is-active";
} else {
nav.className = "nav-right nav-menu";
}
}
</script>
You need bulma.js and jquery 2.2.0 and add id=nav-toggle and id=nav-menu too
somenxavier
on 29 Dec 2016
Doesn't requiring jquery to do this defeat the purpose of Bulma in the first place, which I thought was a jquery free alternative to Bootstrap? Anyway to do this with pure javascript instead so as to not take on the extra weight of jquery?
softwareguy74
on 3 Jan 2017
@softwareguy74 Not sure if things have changed, but I was able to get it working with pure javascript using the code I posted above.
rudedogg
on 3 Jan 2017
It is actually possible to get the mobile menu to work w/out JavaScript by adding a hidden checkbox and showing/hiding the menu depending on its state.
See this fiddle: https://jsfiddle.net/jfm2jyk5/
dak0rn
on 3 Jan 2017
Doesn't requiring jquery to do this defeat the purpose of Bulma in the first place, which I thought was a jquery free alternative to Bootstrap? Anyway to do this with pure javascript instead so as to not take on the extra weight of jquery?
I took that from bulma.io website. Which uses jquery.
somenxavier
on 3 Jan 2017
@dak0rn Hey, that did the trick! And no jquery OR javascript. Thanks!
softwareguy74
on 4 Jan 2017
Perhaps they could implement this in bulma.io website for making example
somenxavier
on 4 Jan 2017
React snippet (w/o jQuery) on an element with className="nav-toggle"
onClick={() => {
let toggle = document.querySelector(".nav-toggle");
let menu = document.querySelector(".nav-menu");
toggle.classList.toggle("is-active");
menu.classList.toggle("is-active");
}}
GBarkhatov
on 29 Jan 2017
@dak0rn nice trick man. dint knew for attribute could be used like that also. one question though, why does the checkbox gets hidden
ghost
on 12 Feb 2017
@abinashdpatra On the technical side, it gets hidden because of the corresponding CSS rule in the style sheet. Functionally, it's hidden because it's just the state holder and does not provide any value to the user.
dak0rn
on 12 Feb 2017
@dak0rn thanks for the explaination. had missed it.
ghost
on 12 Feb 2017
@dak0rn wondering if I am missing something but, say after selection of an item, shouldn't the menu item automatically close?
I also noticed a slight behavior, which I can't figure out as of now. From the JSFiddle you have provided, click on the hamburger menu. While the menu items are displayed, expand the viewport. Notice that the menu items are now displayed stacked up one another.
Thanks,
AngeloAnolin
on 17 Feb 2017
document.getElementById("nav-toggle").addEventListener ("click", toggleNav);
function toggleNav() {
var nav = document.getElementById("nav-menu");
var className = nav.getAttribute("class");
if(className == "nav-right nav-menu") {
nav.className = "nav-right nav-menu is-active";
} else {
nav.className = "nav-right nav-menu";
}
}
Any tips on how to update this code to make it auto close after menu selection?
Update
I got it to work so just sharing incase some one wants to make it auto close as well.
I added a function toggleNav as defined above to the nav-menu item
I am using Vue but it should be similar
<div id='nav-menu' class="nav-right nav-menu" v-on:click="toggleNav">
TaiPhamD
on 11 Mar 2017
@AngeloAnolin Ah, I missed your response.
With the CSS-only technique it indeed does not auto-close; you'd need to add JavaScript.
If you do not use a framework and you are not developing a single page application, you could use the following (plain ol' JavaScript) way: attach a click listener to body. When this listener is triggered, you check if the user has clicked somewhere outside of the menu (with this function) and if so, you just emit a click event on the label again.
dak0rn
on 11 Mar 2017
A bit more succinct on the nav item itself:
<span class="nav-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('is-active');">
shaneturner
on 23 Mar 2017
Following on from @shaneturner
If you want to toggle the text colour of certain nav-items when the hamburger is pressed
<span class="nav-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('is-active'); document.getElementsByClassName('nav-item')[1].style.color = 'black'; document.getElementsByClassName('nav-item')[2].style.color = 'black';">
xlcrr
on 14 Apr 2017
@shaneturner's answer should be the default example in the docs
arturadib
on 2 Jun 2017
This works for me in 2018
function hamburgerHelper(){
document.querySelector('.navbar-burger').addEventListener("click", toggleNav);
function toggleNav() {
var nav = document.querySelector('.navbar-menu');
if(nav.className == "navbar-menu") {
nav.className = "navbar-menu is-active";
} else {
nav.className = "navbar-menu";
}
}
}
lukepighetti
on 16 Apr 2018
@GBarkhatov, your solution is a life-saver! I packaged it in its own function since it was too much code to use in-line for my liking, but it's the only thing that's worked for me in React.
BTW, it's almost been two years since the original post, and the Bulma docs still don't mention that you need to write a JS event handler for the burger menu to work. This may be obvious to seasoned front-end developers, but not to us noobs.
KeepingItClassy
on 18 Apr 2018
@KeepingItClassy - You can always update the docs and add a PR for them too 馃槃 (https://github.com/jgthms/bulma/blob/master/docs/documentation/components/navbar.html)
davidwparker
on 20 Apr 2018
@KeepingItClassy the Bulma docs actually have done a really good job explaining how navbar-menu works, and even give you a js snippet to implement it.
https://bulma.io/documentation/components/navbar/#navbar-menu
tbonz
on 29 Apr 2018
@tbonz my apologies, I was looking in the navbar burger section, not in navbar menu, since the burger is the element that's being toggled. Like I said, I'm new to frontend-development. 馃槼
KeepingItClassy
on 29 Apr 2018
There is a snippet at the docs, but if you use Bulma with Vue can do something like this:
<script>
export default {
name: 'app',
mounted() {
let navbar = document.querySelector('.navbar-burger');
navbar.addEventListener('click', function () {
let target = navbar.dataset.target;
let $target = document.getElementById(target);
navbar.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
}
}
</script>
ibonkonesa
on 23 May 2018
im using vue 2.6.10 with buefy 0.7.5
<span
class="navbar-burger burger"
v-on:click="isActive = !isActive"
v-bind:class="{ 'is-active': isActive }"
data-target="navbarMenuHeroA"
>
<div
id="navbarMenuHeroA"
class="navbar-menu"
v-bind:class="{ 'is-active': isActive }"
>
md5-5362df0e021f989b75fba29c834898f8
<span class="navbar-item">
<router-link
to="/register"
class="button is-my-green is-outlined"
@click.native="isActive = !isActive">Register
</router-link>
</span>
md5-5362df0e021f989b75fba29c834898f8
md5-7df8d1dfcfe421a8189091e21fd8b206
samuelkristianto
on 3 May 2019
Hi,
is there a way t adjust the script or code to:
have the hamburger menu show the menu when you click it
But NOT expand dropdowns?
Directly expanded dropdowns are not very friendly IMHO. I'd like the dropdown menu's to appear but not expanded, only expanding if you click them like my site here:
https://www.bomengids.nl
hanscees
on 24 May 2019
I'm having the same issue as @hanscees .
Also on a separate note, I managed to be able to add / close the menu but the menu doesn't go away when I click on a item inside of it or even if I click outside. Any ideas?
Chompas
on 8 Nov 2019
jQuery :
$('body').on('click', '.navbar-burger.burger', function () {
if ($('.navbar-menu').hasClass('is-active')) {
$('.navbar-menu').removeClass('is-active');
} else {
$('.navbar-menu').addClass('is-active');
}
});
SofianeMeziani
on 16 May 2020
Related issues
leofontes
路
3Comments
DAreRodz
路
3Comments
scottgrayson
路
3Comments
Laraveldeep
路
3Comments
Wikiki
路
3Comments
Most helpful comment
It is actually possible to get the mobile menu to work w/out JavaScript by adding a hidden checkbox and showing/hiding the menu depending on its state.
See this fiddle: https://jsfiddle.net/jfm2jyk5/