Correct use of navbar-burger?

[candlerb]

This is about the Docs.

Overview of the problem

Inconsistent use of navbar-burger in the site itself, versus examples shown.

This is about the Bulma Docs
I'm using Bulma version 0.6.1

Description

The navbar documentation says that the navbar burger should be

<button class="button navbar-burger">

However, Bulma's own site has a number of instances of div or span with

class="navbar-burger burger"

The second class (.burger) doesn't appear in the CSS at all, as far as I can see.

The site is a very useful working reference of Bulma in action, so it would be good to be accurate. Should the burger class be there, or is it an error?

Steps to Reproduce

$ egrep -R "class.*[^-]burger" .
./docs/_includes/examples/navbar-bottom.html:    <div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
./docs/_includes/examples/navbar-color.html:    <div class="navbar-burger burger" data-target="navMenuColor{{ include.color }}-example">
./docs/_includes/examples/navbar.html:    <div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
./docs/_includes/navbar.html:    <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
./docs/documentation/layout/hero.html:          <span class="navbar-burger burger" data-target="navbarMenuHeroA">
./docs/documentation/layout/hero.html:          <span class="navbar-burger burger" data-target="navbarMenuHeroB">
./docs/documentation/layout/hero.html:          <span class="navbar-burger burger" data-target="navbarMenuHeroC">

[feute]

It also seems that the documentation shouldn't use a button, it will look more like a button than navbar-item that it shows in the results of the documentation. It should be using something like

<div class="navbar-burger">
  <span></span>
  <span></span>
  <span></span>
</div>

This is what have been working for me.

[candlerb]

Thanks, the div works well here too.

[stern-shawn]

Yup, it's supposed to be a div based on the working examples being divs and my own experimentation. I addressed this is a PR over here that hopefully will get included in the next release!

[candlerb]

Cool - that's one half.

The other half is the bulma.io site which uses class="burger" in addition to class="navbar-burger"

[feute]

I believe that the burger class in that element is not related to Bulma itself. If you run git grep "\.burger" you'll see that it is being used from JavaScript:

bulma/docs/_javascript/main.js

Lines 43 to 56 in fdeba5d

	// Toggles
	const $burgers = getAll('.burger');
	if ($burgers.length > 0) {
	$burgers.forEach($el => {
	$el.addEventListener('click', () => {
	const target = $el.dataset.target;
	const $target = document.getElementById(target);
	$el.classList.toggle('is-active');
	$target.classList.toggle('is-active');
	});
	});
	}

The navbar example in the documentation uses .navbar-burger (which is a class in Bulma) as the selector to toggle the navbar. I think the documentation site uses .burger to avoid collisions with the examples.

Therefore, the only relevant class for Bulma is .navbar-burger; it is up to you if you decide to use this class as the selector for toggling the navbar from JavaScript or use another, like .burger.

[candlerb]

Ah thanks - I had checked through css/bulma.css, but not through the javascript

docs/_javascript/main.js:  const $burgers = getAll('.burger');

From the point of view of analysing a site, it would be nice if all the bulma css classes had some common prefix so you could recognise them as belonging to bulma. But from another point of view, it would be a lot of extra typing.

[ghost]

If you are using JQuery try this

  // Close mobile & tablet menu on item click
  $('.navbar-item').each(function(e) {
    $(this).click(function(){
      if($('#navbar-burger-id').hasClass('is-active')){
        $('#navbar-burger-id').removeClass('is-active');
        $('#navbar-menu-id').removeClass('is-active');
      }
    });
  });

  // Open or Close mobile & tablet menu
  $('#navbar-burger-id').click(function () {
    if($('#navbar-burger-id').hasClass('is-active')){
      $('#navbar-burger-id').removeClass('is-active');
      $('#navbar-menu-id').removeClass('is-active');
    }else {
      $('#navbar-burger-id').addClass('is-active');
      $('#navbar-menu-id').addClass('is-active');
    }
  });

With the following HTML (Using https://fontawesome.com/ like <i class="fa [...])

  <nav id="navMenu" class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#"><i class="fas fa-home fa-lg"></i></a>
        <a class="navbar-item is-hidden-desktop" href="#where-hours"><i class="far fa-clock fa-lg"></i></a>

        <div id="navbar-burger-id" class="navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div id="navbar-menu-id" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item" href="#section-1">First Section</a>
          <a class="navbar-item" href="#section-2">Second Section</a>
          <a class="navbar-item" href="#section-3">Third Section</a>
        </div>
        <div class="navbar-end">
          <a class="navbar-item is-hidden-touch" href="#where-section"><i class="far fa-clock fa-lg"></i></a>
        </div>
      </div>
    </div>
  </nav>

Hope it'll help 😄
Peace

[vonj]

Also, when I follow the example on the site, I can get the burger menu to collapse and open, but unlike on the website, I can't get the menu bar to display when the page is wide.

That is, I get the burger menu, and only the burger menu also on the desktop. Sigh...

I am on the hero docs btw.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.