The Guide to Customising the Bootstrap 4 Navbar I wish I’d Had 6 Months Ago

Photo by Pankaj Patel on Unsplash

As anyone who’s had any experience with Bootstrap will tell you, the navbar is a huge pain in the ass to style. After a long time of trying to get it to work to my liking, I’ve finally found a balance between custom CSS & Bootstrap boilerplate that works for me, and also learnt the different components that make up the navbar and how to properly style them. I thought this guide might help save other people some pain & time from endless Googling & trawling through Stack Overflow for the solution to the problem, & only finding solutions that either don’t work, or are for deprecated versions of Bootstrap.

At the time of writing this, the current version of Bootstrap is 4.1.

Let’s start off with the basic Bootstrap navbar & explain how it works. The basicnavbar from the Bootstrap site is as follows:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>

This works totally fine if you don’t need to customise it apart from changing from the default navbar-light to navbar-dark, but however if you want to style it, this is when you start running into problems.

Bootstrap runs on pre-styled elements & classes which you call to auto-style your divs. (eg <div class="container-fluid"> will give you a full-width container that covers the whole page) So, when you want to override these classes, best practice is to create your own class names rather than overriding the default Bootstrap classes.

Now, you’ll notice that the nav itself has a few default classes:

navbar navbar-expand-lg navbar-light bg-light

When I first started using Bootstrap, this completely overwhelmed me because I thought I’d have to style all these classes, which resulted in a nightmare of CSS classes and just, no.

A short breakdown of the classes are as follows:

• navbar is the base class where you can style the background colour etc and anything but the collapsable nav-links. I found that styling the nav class and not the navbar class is a much better choice, but I’ll get into that later
• navbar-expand-lg is when the collapsed navbar comes into effect, you can change this to sm md or xs to control this, or you can remove it completely so it’s always collapsed
• navbar-light andbg-light are built in themes, you can also choose navbar-dark and bg-dark . There are also a few colour schemes on the site, but I have never found any use for them because they are also uncustomisable (and ugly)
• You can remove most of the classes and just have some basic Bootstrap in there for functionality & responsiveness which is what I do. I do something along the lines of: navbar navbar-expand-md & then I override the nav class itself in my css. You must keep the navbar class in there, or everything will break!
• The key is not to even bother styling the navbar element, don’t try, it won’t work. The only way I found it works is to actually use inline styling to hardcode the background colour, which is really bad practice. Don’t do it.

Something to remember about the navbar & everything else in Bootstrap, is that you don’t need to use the built in classes all the time, you can in fact use a combination of default Bootstrap & custom classes to create your own content. However, you should still be using the Bootstrap grid system, or there’s no point in using Bootstrap itself.

Navbar brand class as seen in dev tools

Inside the navbar div, first you have a navbar-brand link for the site title and/or a logo, (this is not required, you can remove it if you want to, but it will also be collapsed along with the rest of the links), & the actual collapsed navbar-toggler button (this is important, do not delete this unless you want to lose all responsive functionality) can be styled, but be careful. I’ve broken many a navbar this way.

If you’re using git (and you really should be) make sure you commit before you break it.

The button html is as follows:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> <!-- this is where the button renders in the navbar --> </span>
</button>

A few things to note, as I said don’t change anything in here. The only thing I changed was the actual icon itself, you can put a Font Awesome icon in between the <span class="navbar-toggler-icon"> icon goes here! </span> if you want to change the default icon. You can also change the collapsed nav to display inline, but that’s a whole different tutorial.

Navbar collapse class as shown in chrome dev tools

The next part of the navbar is the <div class="collapse navbar-collapse" id="navbarNav"> which is a div with the id of navbarNav and the class of navbar-collapse that contains the links, and collapses when the navbar does.

The links in the navbar are defined inside the ul classnavbar-nav using the li nav-item class for the list items, and the a link class nav-link like this:

<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

Go ahead and remove the disabled link if you want to, I honestly don’t know why you’d ever have a disabled link ever, but apparently Bootstrap does. The nav-item active class can be removed if you want, however it’ll only apply to the first link item, unless you use Javascript to change the event.

Now we know how it all works, let’s get along to styling!

The difference between navbar and nav

The crux of the Bootstrap nav is knowing the difference between nav and navbar. Basically the navbar class sits inside the nav (nav class=”navbar”) and once you understand that, then you can style them.

I’ve been working on my portfolio, as it’s going to be hosted on a Github.io page, it can only be static, unfortunately, so I’m using Bootstrap & JS to create a one page scroller.

My HTML

My nav class looks like this:

<nav class=”navbar navbar-expand-md fixed-top”>
<a class=”navbar-brand” href=”#”>Navbar w/ text</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarText” aria-controls=”navbarText” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”><i class=”fas fa-bars hamburger”></i></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarText”>
<ul class=”navbar-nav mr-auto nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#section1">Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#section2">About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#section2">Projects</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#section4">Education</a>
</li>
</ul>
</div>
</nav>

You can style the navbarpositioning via the nav classes, I’ve used sticky-top to keep my navbar fixed to the top as I scroll down the page. and I’ve also set my navbar to collapse at the md breakpoint.

Note that I have inserted a custom Font Awesome icon here: <span class=”navbar-toggler-icon”><i class=”fas fa-bars hamburger”></i></span>

Surprisingly there’s not much styling to be done after that. Once you know what you can style, then the rest is fairly easy!

My CSS

The base navbar styling applies to the main navbar, but not the nav itself. The navbar is inherited from the nav class. This is where it gets confusing!

In this case, they are inheriting the link colour from the main page links. You can apply styling to it, but bear in mind that the font styles etc will only be applied to the navbar-brand part.

.navbar {
background: #0C120C // sets background to black
}

// navbar-brand inherits the main link colour (the purple) and applies the #333 hover:

.navbar a:hover {
color: #333 // applies to all hovered links on nav
}

When you put a background on the nav and the navbar it breaks

The nav links are applied to the ul inside the navbar-collapse div which means that they are different from the navbar links:

.nav a {
color: #fff; // applies to all of the ul links
}

Styling for the icon. Icons are used via the <i> tag and can be styled via font classes:

.hamburger {
font-size: 20px;
color: #fff;
}

So to break it down:

• All link/text styling inside the navbar class only applies to the navbar-brand class! Other styling such as background colours etc will apply to the whole navbar
• All the links inside the <ul class=”navbar-nav mr-auto nav”> are styled by the nav element itself, trying to change these on the navbar will not work!

I’m using the nav class to apply styling to the links, this only applies to the nav-item nav-links because the navbar-brand is outside of the navbar-nav ul links.

Now this is something that to be honest I should have known already, but all those Bootstrap classes can be so confusing and you don’t even realise at first that you don’t need all of them, and that you can in fact change it without breaking it (who would have thought?)

Learning this has saved my life, and so much time, because let’s be honest, the navbar is the worst thing about Bootstrap, and I hope I’ve saved you some pain!

Hope that helped and happy Bootstrapping!