Stretched Bulma NavBar Navigation Tutorial

Welcome to my stretched Bulma navigation tutorial. For those of you that don’t know. Bulma is an incredibly easy to use free and open-source CSS Framework built on the latest CSS flexbox features. Bulma comes with many components, such as a navigation bar and elements like tooltips and buttons which can be customised to suit your needs. Furthermore, it is modular, allowing you to use as many or little features that you require.

Having previously used many frameworks over the years including Bootstrap and Foundation. I switched to Bulma to create my latest WordPress blog theme and have built several other websites since.

Generally, developers use CSS frameworks because they are flexible and easy to use. Projects can be done so much quicker in this world where people want things done yesterday. I have also extended a NavWalker so Bulma can be easily integrated into a WordPress theme.

Now back to this tutorial. Like many frameworks, the Bulma navbar component has support for Navigation items to be either on the left (.navbar-start) or the right (.navbar-end) classes. During the redesign of my blog earlier in the year, I wanted to change to a stretched Bulma navigation that spans items evenly across the top. It didn’t take long to discover that it can be done with the power of Flexbox.

Prerequisites

You need to include the latest version of Bulma in your project. Currently, it has been tested on 0.74 and 0.75. This can be done by either including the production CSS file into your project or my preferred method would be to use NPM and node-sass to build Bulma.

Setting up the NavBar

As you can see I have only made 1 small change to the HTML code. Where you would normally have either the .navbar-start or .navbar-end classes I have added .navbar-center instead. In the CSS code, I have only enabled the navigation bar to display on-screen widths a minimum of 1088px allowing the navigation to remain the default on smaller displays. This can, however, be changed to suit your individual needs.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Logo" width="112" height="28">
    </a>
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" 
       data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbarBasicExample" class="navbar-menu">
    <div
      class="navbar-center">
      <!-- Here I have created the navbar-center class -->
      <a class="navbar-item">Articles</a>
      <a class="navbar-item">Projects</a>
      <a class="navbar-item">Contact</a>
      <a class="navbar-item">About</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          <i class="fas fa-search"></i>Topics</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">About</a>
          <a class="navbar-item">Jobs</a>
          <a class="navbar-item">Contact</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Report an issue</a>
        </div>
      </div>
    </div>
  </div>
</nav>

@media screen and (min-width: 1088px){
 .navbar-center {
    display:flex;
    justify-content: stretch;
    align-items: stretch;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: row;
 }
 .navbar-link,.navbar-item {
    align-items: center;
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
 }
 .navbar-dropdown .navbar-item {
   justify-content:left;
 } 
}

Demo & Download Stretched Bulma

Please note: The CodePen demo works best in full-screen mode, which allows you to see the stretched navigation.

See the Pen
Bulma Full Width Desktop Navbar Flex by Tracy Ridge (@ridgey28)
on CodePen.