Create Responsive Navbar without Bootstrap

Creating a responsive navbar with bootstrap is super easy. You just have to copy the navbar element from their site, add it to your site, add the necessary JavaScript and CSS links to header and footer and voila!

But adding the bootstrap framework just for a responsive navbar is an overkill. Bootstrap is not a small framework and it adds substantial bloat to your page and slows it down.

In this tutorial i am going to show you how to create a responsive navbar with minimum amount of code using flex. No bootstrap required!

End result will look like this demo.

Create the navbar layout and add it to web page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar Demo</title>  
   
</head>
<body>    

    <nav class="navbar">

        <ul id="navlist">
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>

    </nav>
  
</body>

</html>

Remove the body margin and padding so that the navbar sticks to the background seamlessly. This is optional and you can skip.

body {
         padding: 0;
         margin: 0;
 }

Define the classes for styling navbar and its elements

.navbar {
        position: relative;
        background: black;
}

#navlist {
       list-style: none;
       display: flex;
       padding: 0;
       margin: 0;
       background: black;
}

#navlist li {
      flex: auto;
      text-align: center;
      padding: 1.6em;
      font-size: 18px;
      color: white;
}

#navlist li:hover {
     background: red;
}

Note the use of flex in #navlist. This places the list items in a single horizontal line one after another – just like menu items in a navbar. List elements are styled with flex:auto and text-align:center. This makes sure that the items are placed in equal distances and center aligned.

Write the media queries to make the navbar small in mobile devices

@media all and ( max-width: 500px ) { 

    .navbar {
         padding: 1.6em;
    }

    #navlist {
         flex-direction: column;
         display: none;
    }

}

Note the use of flex-direction: column. This changes the direction of menu items from horizontal to vertical in mobile devices. We are hiding the initial state of the menu items with display:none. The menu items will be made visible on click event of a hamburger icon/link which will be used to toggle the menu items in smaller screens.

Let us create the toggle button now.

<span id="toggle-nav" onclick="toggleNav()">
    <i class="fa fa-bars"></i>
</span>

This goes just above the list items, inside the navbar. The onclick event calls a function toggleNav(), we will talk about that a bit later.

On bigger screens this button should be hidden.

#toggle-nav {
   display: none;
   margin: auto;
   cursor: pointer;
}

It should be visible on smaller screens. Add this code to media query section in stylesheet.

 #toggle-nav {
    display: block;
    color: white;
 }

Almost done! Now you just need the javascript code to handle the toggle button click event.

Create a script section on the page just before closing body tag and put the following code:

<script>
    
    var nav = document.getElementById('navlist');

    function toggleNav () {       

        if ( nav.style.display === "" )
        nav.style.display = "block";

        else
        nav.style.display = "";
    }


    function windowResizeHandler () {
        if ( screen.width > 500 )
        nav.style.display = "";
    }

    window.addEventListener("resize", windowResizeHandler);

</script>

Several things to note here. First we are referencing the navlist with a variable nav. Then registering a window resize handler windowResizeHandler which will be fired when screen size changes. Inside that function we are checking the screen width. For bigger screens navlist will be hidden.

We have met the toggleNav() function before. It handles show/hide of menu items in smaller screens.

Everything is set now. Wait.. The hamburger icon in toggle button is a font awesome icon. So let us reference that in header:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Here is the full code to wrap up this tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .navbar {
            position: relative;
            background: black;
        }

        #navlist {
            list-style: none;
            display: flex;
            padding: 0;
            margin: 0;
            background: black;
        }

        #navlist li {
            flex: auto;
            text-align: center;
            padding: 1.6em;
            font-size: 18px;
            color: white;
        }

        #navlist li:hover {
            background: red;
        }

        #toggle-nav {
            display: none;
            margin: auto;
            cursor: pointer;
        }

        @media all and ( max-width: 500px ) { 

            .navbar {
                padding: 1.6em;
            }

            #navlist {
                flex-direction: column;
                display: none;
            }

            #toggle-nav {
                display: block;
                color: white;
            }

        }


    </style>
    
</head>
<body>    

    <nav class="navbar">

        <span id="toggle-nav" onclick="toggleNav()">
            <i class="fa fa-bars"></i>
        </span>

        <ul id="navlist">
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
            <li>Items</li>
        </ul>

    </nav>
  
</body>

<script>
    
    var nav = document.getElementById('navlist');

    function toggleNav () {       

        if ( nav.style.display === "" )
        nav.style.display = "block";

        else
        nav.style.display = "";
    }


    function windowResizeHandler () {
        if ( screen.width > 500 )
        nav.style.display = "";
    }

    window.addEventListener("resize", windowResizeHandler);

</script>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *