Hamburger menu only available on right hand side

[Bamblehorse]

This is about Bulma version 0.6.2.

Overview of the problem

The hamburger menu which is nested inside navbar-brand only appears on the right hand side of the navbar. It is common to see the hamburger menu on the left side in a mobile app. It would be nice to have that as an option.

Hamburger

Steps to Reproduce

Adding navbar-burger as direct child of navbar-brand:

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

Expected behavior

navbar-burger could appear as first item on mobile when given a class, e.g. navbar-burger-left

<button class="button navbar-burger-left">
  <span></span>
  <span></span>
  <span></span>
</button>

Not sure on naming convention :-D

as far as I can tell it would just need the margin-left to be removed:

Actual behavior

It only appears on the right

[Bamblehorse]

I am aware there's a big UX debate on where hamburgers should be and if we should use them at all.

Just curious to hear the reasoning behind this if anything.

[kamrulhassan]

at this point, I moved the burger a bit higher position to have the expected behavior. it would be nice if we can have this flexibility :)

[johnwebbcole]

An issue I recently ran into... I'd like to use a second nav-bar under the main one for a toolbar... In mobile, I'd like to change the hamburger and move it opposite of the top nav.

Options to position the toggle would be welcome.

[richardtallent]

This is exactly the issue I'm having -- I'm a left-handed mobile user, so a right-sided hamburger menu is suboptimal. I'll be implementing swiping as well for my nav drawer, but I don't think hamburgers are going away anytime soon.

I was able to get close enough by adding a new class to my navbar-brand and moving the burger to be the first element, but YMMV, I don't have anything other than the brand on this menu.

.navbar-brand.left-burger {
    align-items: flex-start;
}

.navbar-brand.left-burger .navbar-burger {
    margin-left: 0;
    margin-right: 0;
}

[kcthota]

I ran into the same issue but I needed burgers on both sides. Left burger for opening window leftnav and right burger for launching nav actions.

Here is what I did:

<div class="navbar-brand">
    <div class="ml-0 navbar-burger burger">
      <span></span>
      <span></span>
      <span></span>
    </div>   
    <a class="navbar-item" href="http://bulma.io">
      <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <div class="navbar-burger burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>