---
title: 'Stretched Bulma NavBar Navigation Tutorial'
url: 'https://www.worldoweb.co.uk/2019/stretched-bulma-navbar-navigation-tutorial'
markdown: 'https://www.worldoweb.co.uk/2019/stretched-bulma-navbar-navigation-tutorial.md'
date: '2019-06-01'
description: 'Learn how to create a stretched Bulma navigation bar that spans items evenly across the top using the power of Flexbox.'
taxonomy:
  category:
    - 'Web Development'
  tag:
    - Tutorial
    - HTML
    - CSS
    - Bulma
---

# Stretched Bulma NavBar Navigation Tutorial

 Published on June 1, 2019 by Tracy Ridge in  [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) 

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.

![Stretched Bulma Navigation](https://www.worldoweb.co.uk/images/a/6/1/4/2/a61423604b7121d65002342fd6ef3cbe7b2e1bef-stretched-bulma-navigation-e1559397099567.jpg)WOWs stretched navigation

Having previously used many frameworks over the years including [Bootstrap](https://getbootstrap.com/) and [Foundation](https://foundation.zurb.com/). I switched to [Bulma](https://bulma.io/) 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](https://www.worldoweb.co.uk/2018/wordpress-bulma-navwalker-font-awesome-support) so [Bulma](https://www.worldoweb.co.uk/2018/hello-bulma-css-goodbye-bootstrap&target=_blank) 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](https://bulma.io/documentation/customize/with-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.

```html
<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>
```

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

## Demo & Download Stretched Bulma

[Download](https://www.worldoweb.co.uk/user/pages/downloads/bulma-full-width-desktop-navbar-flex.zip)

**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](https://codepen.io/ridgey28/pen/NJbzmj/) by Tracy Ridge ([@ridgey28](https://codepen.io/ridgey28))

### Share

 [X](https://x.com/intent/tweet?text=Stretched%20Bulma%20NavBar%20Navigation%20Tutorial&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2019%2Fstretched-bulma-navbar-navigation-tutorial&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2019%2Fstretched-bulma-navbar-navigation-tutorial "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2019%2Fstretched-bulma-navbar-navigation-tutorial&title=Stretched%20Bulma%20NavBar%20Navigation%20Tutorial "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2019%2Fstretched-bulma-navbar-navigation-tutorial "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Stretched%20Bulma%20NavBar%20Navigation%20Tutorial%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2019%2Fstretched-bulma-navbar-navigation-tutorial "Share on Bluesky") [Email](mailto:?subject=Stretched%20Bulma%20NavBar%20Navigation%20Tutorial&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2019%2Fstretched-bulma-navbar-navigation-tutorial "Share via email") 

#### Tags

 [ Tutorial](https://www.worldoweb.co.uk/tag/tag:Tutorial) [ HTML](https://www.worldoweb.co.uk/tag/tag:HTML) [ CSS](https://www.worldoweb.co.uk/tag/tag:CSS) [ Bulma](https://www.worldoweb.co.uk/tag/tag:Bulma) 

##### Next

 [ ← A Mini Guide to Optimising Your Site for the SERPs ](https://www.worldoweb.co.uk/2019/a-mini-guide-to-optimising-your-site-for-the-serps) 

OR

##### Previous

 [ The 5 Best WordPress Plugins for Savvy Marketers → ](https://www.worldoweb.co.uk/2019/the-5-best-wordpress-plugins-for-savvy-marketers)

---

## Navigation

- Previous: [A Mini Guide to Optimising Your Site for the SERPs](https://www.worldoweb.co.uk/2019/a-mini-guide-to-optimising-your-site-for-the-serps.md)
- Next: [The 5 Best WordPress Plugins for Savvy Marketers](https://www.worldoweb.co.uk/2019/the-5-best-wordpress-plugins-for-savvy-marketers.md)