Bootstrap 4 Navbar Navigation Tutorial

If you're using Bootstrap 4, chances are, you're going to need a navigation of some sort. Fortunately, Bootstrap 4 navigations are straightforward and quite flexible.

In this tutorial, we're going to create a navigation for a project based on the course this tutorial is a part of. So let's get started.

If you prefer watching a video tutorial..

Be sure to Susbcribe to the Official Coursetro Youtube Channel for more awesome videos!

Defining the Navbar

Note: This tutorial is a part of our Free Bootstrap 4 Course, and we have already set up this project from scratch. If you wish to follow along from the beginning, be sure to check out the course and follow along from the beginning.

Here's a quick look at the project we will be creating from scratch (along with the navigation you see at the top, which is the focus of this specific tutorial):

Assuming you already have Bootstrap 4 integrated, open up the /src/index.html file and first we will define a basic layout:

        <div id="hero">
            <div class="container">
                <div class="row">

                </div>
            </div>
        </div>

The #hero id is a wrapper for the watermark background of the game character.

The #container and #row define a centered fixed-width container for our layout and the navbar we will define.

Inside #row will go our navbar.  Expanding on the previous example:

        <div id="hero">
            <div class="container">
                <div class="row">
                   <nav class="navbar navbar-toggleable-md navbar-inverse">

                        <a href="#" class="navbar-brand text-primary" id="logo">GAMELOGO</a>

                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                    </nav>
                </div>
            </div>
        </div>

We've added a nav element with the following classes:

• navbar - This class is needed to define the actual navbar component.
• navbar-toggleable-md - This specifies that it should toggle (or show) on medium viewports.
• navbar-inverse - This is specified for dark backgrounds (.navbar-light is used for light backgrounds).

Then, we added a link with navbar-brand for our logo. text-primary gives the text our primary color defined with our custom Bootstrap sass file.

Next is the button element. Adding navbar-toggler makes this button element the hamburger toggle that we'll see on smaller screens. The data attributes are all necessary to make this function properly.

Expanding on the above code, add:

        <div id="hero">
            <div class="container">
                <div class="row">
                   <nav class="navbar navbar-toggleable-md navbar-inverse">

                        <a href="#" class="navbar-brand text-primary" id="logo">GAMELOGO</a>

                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">Overview</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">Specs</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">FAQ</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">Purchase</a>
                                </li>
                            </ul>
                        </div>
                        
                    </nav>
                </div>
            </div>
        </div>

This final section holds the actual menu. The id of navbarSupportedContent is also defined in the button above in data-target. When the button is touched on a smaller device, it will reveal the menu that's defined in the HTML we just added.

Styling the Navbar

Now, let's hop into our /src/scss/style.scss sass file to define a few rulesets:

.navbar {
    width:100%;
    background:none !important;

    @media(max-width: 34em) {
        background: black !important;
    }

    .navbar-toggler {
        cursor:pointer;
        outline:0;
    }

    .nav-link {
        text-transform:uppercase;
        font-weight:bold;
    }

    .nav-item {
        padding: 0 1rem;

        @media(max-width: 34em) {
            padding: 0;
        }

        .nav-link {
            @media(max-width: 34em) {
                font-weight:normal;
                color:#fff !important;
            }
        }
    }
}

We're making various adjustments here to the navbar itself, and the child classes that reside within it.

The menu should now look like this on a larger viewport:

And like this on smaller devices:

Conclusion

As you can see, it's rather quick and easy to get up and running with Bootstrap 4's Navbar and Nav. It's all about adding the right classes and the all-important data-target to ensure that the mobile navigation works.