Bulma: Correct use of navbar-burger?

[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:

https://github.com/jgthms/bulma/blob/fdeba5d111f8a7e695de4fc7a70966348daeeb03/docs/_javascript/main.js#L43-L56

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 :smile:
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[bot]]

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.