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.
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.
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;
}
}
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.
Welcome to Hot Web Dev August 2024, featuring the latest technology and web development news.… Read More
Welcome to Building an Awesome Daisy UI WordPress Theme - Part 4. Daisy UI is… Read More
Welcome to Hot Web Dev July 2024, featuring the latest technology and web development news.… Read More
In 2023 I revamped my WordPress theme to include Daisy UI. In this article, I… Read More
Welcome to Hot Web Dev June 2024, featuring the latest technology and web development news.… Read More
Daisy UI is an awesome selection of Tailwind components for your next WordPress classic theme.… Read More