Bulma - Mobile Layout

Question

I'm trying to implement this mobile layout using the Bulma CSS Framework (the red header and the blue footer are both fixed) :

Here is the corresponding code :

<nav class="navbar is-danger is-fixed-top" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="index.php">
            <img src="http://via.placeholder.com/28x28" width="28" height="28">
        </a>
        <div class="navbar-burger burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item is-expanded">
            <i class="fa fa-user"></i>
            <p class="is-size-7">Account</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-list"></i>
            <p class="is-size-7">Tasks</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-flag"></i>
            <p class="is-size-7">Alerts</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-cog"></i>
            <p class="is-size-7">Settings</p>
        </a>
    </div>
</nav>
<div class="section">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

• Header : is there a way to display a left side burger, a centered logo and a right side icon ?
• Footer : is there a class to display icons and text on top of each other instead of side by side ?

Is this mockup achievable out of the box ? I do not mind doing it manually in CSS but since this mobile layout seems pretty common I was hoping that there would be a natural way to do it.

Vatic

I suggest you look at the CSS Bulma is composed of, then all of your questions will be answered. What you're struggling with are extremely basic CSS alignment behaviors. Also, you will never be able to make a web app behave like a native app — because Safari. – Chrono

As I said : "I do not mind doing it manually in CSS but since this mobile layout seems pretty common I was hoping that there would be a natural way to do it.". When I say "natural way", I mean "ready-to-use" classes which, to me, are the point of using a CSS framework. You are basically telling me to do it in CSS when my question is about the tools provided by the framework and not about how flexbox works. Sorry for the misunderstanding... About the difference between web apps and native apps, thanks for the great tip. Sadly I am not a freelancer and I can not decide which tech stack to use. – Vatic

Answer 1

Is this mockup achievable out of the box?

Yes and No.

You will need to do a small bit of HTML restructuring and add a few lines of CSS to move the burger to the left side.

The layout for the footer can be achieved using Bulma modifier classes.

fiddle

Solution

Header

<div class="navbar-brand">
    <div class="navbar-burger burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a class="navbar-item" href="index.php">
      <img src="...">
    </a>
</div>

Switch the order of elements in .navbar-brand - The burger comes first, the logo second.

Add the following CSS

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

Footer

Add the .is-block and has-text-centered modifying classes to .navbar-item:

<a class="navbar-item is-expanded is-block has-text-centered">
   <i class="fa fa-user"></i>
   <p class="is-size-7">Account</p>
</a>

For more info, see here and here

Snippet

js added to make menu functional in demo

// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {

  // Add a click event on each of them
  $navbarBurgers.forEach(function($el) {
    $el.addEventListener('click', function() {

      // Get the target from the "data-target" attribute
      var target = $el.dataset.target;
      var $target = document.getElementById(target);

      // Toggle the class on both the "navbar-burger" and the "navbar-menu"
      $el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });
}

.navbar-burger {
  margin-left: 0 !important;
  margin-right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar is-danger is-fixed-top" role="navigation">
  <div class="navbar-brand">
    <div class="navbar-burger burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a class="navbar-item" href="index.php">
      <img src="https://via.placeholder.com/28x28" width="28" height="28">
    </a>

  </div>
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">Example 1</a>
      <a class="navbar-item">Example 2</a>
      <a class="navbar-item">Example 3</a>
    </div>
    <div class="navbar-end">
    </div>
  </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-user"></i>
      <p class="is-size-7">Account</p>
    </a>
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-list"></i>
      <p class="is-size-7">Tasks</p>
    </a>
    <a class="navbar-item is-expanded is-block has-text-centered">
      <i class="fa fa-flag"></i>
      <p class="is-size-7">Alerts</p>
    </a>
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-cog"></i>
      <p class="is-size-7">Settings</p>
    </a>
  </div>
</nav>
<div class="section">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Abiotic

Great answer, thank you so much. About the Header, do you think it would be appropriate to use a Level component inside a navbar-item ? Maybe that would allow for more control over the position of the elements – Vatic

Do you plan to have left and right parts to a menu item? – Abiotic

Well, I would like to have a left side menu burger, a centered logo and a right side icon (first image), I was thinking of something like this : link to pastebin but I was not successful... – Vatic

You can add the right-sided icon as a normal .navbar-item, and then use a bit of CSS for the header layout. example --> jsfiddle.net/sol_b/9ofgegun/1 – Abiotic