DEV Community

Cover image for Bootstrap 5.1 Navbar and Hamburger toggler 🍔

Posted on

Bootstrap 5.1 Navbar and Hamburger toggler 🍔

Add Bootstrap CSS inside your <head> tag. Make sure it's ABOVE your other stylesheets.

Add Popper and Javascript plugins at the bottom, above your closing </body> tag.

OK. This goes inside your <body> tag probably below your <header> or <jumbotron> sections.
Here's the rest of the code:

<nav class="navbar navbar-expand-sm navbar-dark">
            <div class="container">
                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#n_bar" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                <div class="collapse navbar-collapse" id="n_bar">
                    <ul class="navbar-nav">
                        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Careers</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Links</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Membership</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Join Us</a></li>
Enter fullscreen mode Exit fullscreen mode

You will need to change the href="#" to wherever your other pages are located. So for example:

<li class="nav-item"><a class="nav-link" href="pages/about.html">About</a></li>
Enter fullscreen mode Exit fullscreen mode

Add the navbar class to your custom CSS sheet and change the background to a dark color. (I'm using black) because we added the navbar-dark class with the navbar class.

.navbar {
    background-color: black;
Enter fullscreen mode Exit fullscreen mode

And that's it! It should look something like this when the viewport is expanded:
expanded view

And it should look like this when the viewport is extra small and we clicked on the hamburger menu:
compact view with menu engaged

If you're interested, here's an explanation of the bootstrap classes, attributes and aria values we used:

the main class needed to make the navbar notice how I used a <nav> tag and not <div>

this class will expand the navbar for larger viewports. As you can see I used sm which mean for any viewports with a small breakpoint or higher

this class will use color choices for a dark background. If you omit it, it will be suited for light colors

this will help give the navbar items some more padding

this will enable the hamburger icon button to be displayed

this is Bootstrap's spacing utility class, specifically margin-start-auto which will push the button all the way to the right by expanding its left margin. (Note: if you use Bootstrap 4 it's ml-auto with an 'l'.)

this attribute is needed to communicate with javascript to collapse the menu

this attribute holds the id of the element that is either hidden or shown when clicked

aria - Accessible Rich Internet Applications
will allow assistive technologies to convey appropriate information to persons with disabilities

aria-label="Toggle navigation"
will give indication that the navbar has been toggled

this will display the hamburger icon

this class will start the hamburger menu in the collapsed state

this class is needed for the large viewport menu to display properly, as well as the expanded options on the hamburger menu to be positioned correctly

from the <div> which holds the <ul>, this ID will be passed to the data attribute data-bs-target inside <button> element

class="nav-item active"
this class is needed in the <li> element to designate the list item as one of the options for the navbar
NOTE: add the active class for the page which is currently active. So if you're working on index.html the <li> element which holds the home item would be active

this class is within the <a> element to indicate it's a link

Thank you for reading this post. I know my explanations may not have been 100% clear but I hope it was sufficient to create a basic collapsable menu with breakpoints for large/small screens.

You can follow me on Twitter or just hit me up!

Top comments (2)

codedrian profile image
Adrian Gaile Singh

Heya. I tried to change the background color of .navbar to #284440 but it doesn't change.

thejourneyville profile image

Hmm, did you figure it out? If not, can you post the code here?