Bulma navbar with two rows

Question

What's the best approach to recreate this in bulma.io? Including responsivness, hamburger etc.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">

    <div class="container">

        <div class="row navbar-first-row">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar-main-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="sr-only">Toggle navigation</span>
            </button>

            <div class="navbar-right navbar-text hidden-xs">
                Logo
            </div>

            <h1 class="h4 navbar-text">Really long application title</h1>

        </div>

        <div class="row navbar-second-row">

            <div class="navbar-right navbar-text hidden-xs">Logged User</div>

            <div class="collapse navbar-collapse" id="navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>

        </div>

    </div>

</nav>

--- tl;dr ---

I recently moved to Vue.js on frontend, which involved massive changes in my workflow. I was also thinking about trying to switch from Bootstrap3 to something more cleaner and tried Bulma. It was really pleasuring experience until I wanted to do something just a little bit out of ordinary. In my case it was two-lines navbar. After an hour of trying I quickly switched back to Bs3.

The main advantage of using bootstrap is that thousands of weirdos who wanted to achieve all kinds of crazy already asked dozens of silly questions. Most of them were answered by the patient community and are now available to the public. Bulma unfortunately doesn't really have this yet.

I feel that at least 70% of being a programmer nowdays mean to google-around stackoverflow anyway. Ability to research quickly to the subject is essential. I don't have the time to explore everything for myself, I have a family to feed and my clients don't give a damn about which framework I use. But at least I decided to ask. May be someone will face similar challenge in the future. Cheers.

Schaper

In your example, on smaller screens the logo and login area hide on mobile. Is that something you want to retain? – Appetitive

Yes, exactly. This template is for intranet application. Logo/login is not that important on a mobile. – Schaper

Answer 1

There are likely many ways to do this. Here is one approach:

Create your menu as described in the documentation Then...

HTML

1. Add the 'Application Title' as the first-child of navbar-brand.
2. Add the is-hidden-touch modifier to the navbar-item containing the logo. This will hide it on mobile and tablet devices.
3. The 'logged in user' content can be added to navbar-end.

CSS

1. We need navbar-brand to occupy its own 'row'. To do this, update its width to 100%.
2. Then, add the justify-content property to navbar-brand to space its contents evenly.
3. To ensure that navbar-menu moves to a new 'row', you must add the flex-wrap property to the navbar.

fiddle

.navbar-brand {
  width: 100%;
}

.navbar {
  flex-wrap: wrap;
}

.navbar-brand {
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item">Really Long Application Title</a>
    <a class="navbar-item is-hidden-touch">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma" width="112" height="28">
    </a>
    <button class="button navbar-burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">Item 1</a>
      <a class="navbar-item">Item 2</a>
      <a class="navbar-item">Item 3</a>
      <a class="navbar-item">Item 4</a>
      <a class="navbar-item">Item 5</a>
    </div>
    <div class="navbar-end">
      <a class="navbar-item">Logged in</a>
    </div>
  </div>
</nav>

Appetitive