Building a responsive Navigation Bar Using CSS and Vanilla Javascript

When rendering a web page on different screen sizes, distortions and irregularities may be present. To avoid these issues, there is a need for a responsive design. Bootstrap, a CSS framework ,is a popular option for adding responsiveness to the page, but also has some drawbacks. It is bulky, hard to read sometimes, and not easy to customize.

This article describes how to create a responsive navigation bar using HTML, CSS, and Javascript. To carry out this process; basic knowledge of HTML, CSS and Javascript is required.

The code required to create the responsive navbar is divided into three for the HTML, CSS, and Javascript respectively.

HTML CODE The structure of the HTML code is explained below:

The tag that contains the navbar is the header tag. The header has two class names -flex and row- with respect to the CSS to be applied.

Within the Header Tag is the nav tag, true to the semantics of the name, it would be the nav bar described in this article. It has an id of “nav”, and like the header tag, it has two class names, flex and row.

Inside the 'nav' tag are two elements - a div with an id of “nav-icon” and a ul(Unordered list) tag with two classes of "flex" and "row." The div with the id of “nav-icon” contains three empty divs. These empty divs would be styled to be a hamburger icon. The ul contains list tags(li), each with an embedded link. The list tags would be styled to be the navigation links.

HTML Codes

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Efico</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<header class="flex row">

            <nav id="nav" class="flex row">


                 <div id="nav-icon">
                            <div></div>
                            <div></div>
                            <div></div>
                </div>
                <ul class="flex row">
                    <li>
                        <a href="./index.html">home</a>
                    </li>
                    <li>
                        <a href="./about.html">about</a>
                    </li>
                    <li>
                        <a href="./contact.html">contact us</a>
                    </li>
                    <li>
                        <a href="./service.html">services</a>
                    </li>
                    <li>
                        <a href="./news.html">news</a>
                    </li>
                    <li>
                        <a href="./faqs.html">faqs</a>
                    </li>
                </ul>
            </nav>
        </header>




    <script src="./script.js"></script>

</body>
</html>

CSS Codes

li {
    list-style-type: none;
}
.flex {
    display: flex;
}

.row {
    flex-direction: row;
}

body {
    overflow-x: hidden;
}
header {
    padding: 0 30px 0 52px; 
    justify-content: space-between;
    align-items: flex-start;
    height: 110px;
}

nav {
    height: inherit;
    width: 50%;
}
nav ul {
    width: 100%;
   height: inherit;
   align-items: center;
   justify-content: space-between;
}

nav a {
    font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    color:white;
    white-space: nowrap;
}

For smaller screens

@media only screen and (max-width:400px) {
    nav ul.flex.row {
        padding-top: 80px;
        z-index: 2;
        justify-content: flex-start;
        background: #3C185B;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        min-height: 110vh;
        flex-direction: column;
        overflow: hidden;
        transition-duration: 300ms;
        transform: translateX(-100%);
    }
    nav.open ul.flex.row {
        transform: translateX(0);
    }
    nav {
        width: fit-content;
    }
    nav ul.flex.row li {
        margin-bottom: 40px;
    }
    #nav-icon {
        position: relative;
        z-index: 4;
        margin-top: 25px;
        width: 35px;
        height: fit-content;
        cursor: pointer;
    }
    #nav-icon div {
        border-radius: 2px;
        height: 3px;
        width: 35px;
        margin-bottom: 10px;
        background-color: white;
        transition-duration: 300ms;
    }
 /*

nth-child() is a pseudo-class matches elements based on their position in a group of siblings. Siblings are elements that are held in a parent section like the divs.

*/


    #nav-icon div:nth-child(3) {
        margin-bottom: 0;
 color: black;

    }

/* The rotate() CSS function defines a transformation that rotates an element around the x, y and z-axis without deforming it. */


    .open #nav-icon div:nth-child(1){
      transform: rotateZ(-45deg) translateX(-8px)translateY(10px);
 color: black;
    }

/* The default colour of the hamburger icon is white but you can add any color */

    .open #nav-icon div:nth-child(2) {  
        opacity: 0;


    }
/* The class of open is from the javascript code */

    .open #nav-icon div:nth-child(3){
    transform: rotateZ(45deg) translateX(-8px)translateY(-10px);
  }

Javascript Codes

Note: The script tag should be embedded in the body

/* In the HTML tag, the div tag has an id of “nav-icon” */
var icon = document.getElementById("nav-icon");


/* In the html tag, the nav tag has an id of “nav” */

var nav = document.getElementById("nav");

/* Since we have defined the variable “icon” we add event listener for the  click */

icon.addEventListener("click", function(){

/* creates a toggle of when clicked it opens and closes */

nav.classList.toggle("open")
})

Results

Screenshot (484).png

The Hamburger icon

Screenshot (485).png

The responsive navbar with the cross icon and the nav elements.

You can reach out to me on twitter if you encounter any challenge: twitter.com/HeritageAlabi1

For more tutorials on pseudo-class elements, you can visit developer.mozilla.org/en-US/docs/Web/CSS/:n..