How to Create a Responsive Navbar with Toggler Button Animation Using Flexbox?

Hello Friends,

Today we are going to see how to make a Responsive Navbar using Flexbox.
Why Flex box? because flex box gives us freedom to change the order of elements within its children. You are gonna see in this post how we achieve it. So without further ado lets gets started...

I am going to create a folder on my desktop and name it responsiveNavbar (you can create wherever you wish). let's create two files index.html and styles.css; I am going to open the folder in VS Code, (you can use your favorite code editor, i like VS Code);

From the above preview you can see the navbar is divided into 3 parts

Brand Name(it can be logo or company name anything..)
Nav links and
Login and Signup Buttons

Lets first create a basic markup for our project
open index.html file and paste the following code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive NavBar</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav class="nav__bar">
        <div class="nav__brand">
          <a href="#" class="navbar__brand">Brand Name</a>
        </div>
        <div class="nav__links">
          <ul class="nav__items">
            <li class="nav__item">
                <a href="#" class="nav__link">Home</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">About</a>
            </li>
            <li class="nav__item">
              <a href="#" class="nav__link">Services</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Blogs</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Contact</a>
            </li>
          </ul>
          <div class="nav__btns">
              <button class="nav__btn">Sign Up</button>
              <button class="nav__btn">Login</button>
          </div>
        </div>   
      </nav>
    </header>
  </body>
</html>

Nothing Fancy, we created 3 div's One for BrandName/logo second ul for the links and finally the 3rd for our signup and login buttons within the menu div. Also we have linked our styles.css to our index.html file.

Now lets start designing our navbar. Open styles.css and paste the following code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
  color: #fff
}
ul li {
  list-style-type: none;
}
nav.nav__bar {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  height: 8vh;
  background-color: #00003f;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

lets understand what the above code,

At line one we have imported Google fonts,
then we removed the default padding, margin and set the imported font-family;
We also set the font-size for our html document to be 62.5%; the value because so in the later styles its easy to define our font-sizes rem units.
We have also set the display to be flex, this will display our child items/elements in a row (the flex-direction property's default is row)

so far our display should look as shown in the below image.

lets move ahead and style our brand, links and buttons.
Come back to our styles.css and paste the following code

.nav__brand {
  margin-left: 3rem;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.25rem;
  color: #f6f6f6;
}
.nav__menu {
  display: flex;
  align-items: center;
  transition: 0.5s ease-in;
}
.nav__items {
  display: flex;
  gap: 2rem;
  transition: 0.5s linear;
}
.nav__link {
  font-size: 1.8rem;
}
.nav__link:hover,
.nav__link:focus {
  color: #f6f6f6;
  font-weight: 600;
}
button {
  margin-right: 1.5rem;
}
.nav__btns {
  margin-right: 3rem;
  padding: 0.5rem 1rem;
}
.nav__btns .signup,
.nav__btns .login {
  padding: 0.6rem 2rem;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  width: 12rem;
  transition: background 0.2s ease-in-out;
}

.nav__btn.signup {
  background: transparent;
  border-color: #cd0362;
}

.nav__btn.login {
  background-color: #03cd62;
}
.nav__btn.login:hover,
.nav__btn.login:focus {
  opacity: 0.8;
}
.nav__btn.signup:hover,
.nav__btn.signup:focus {
  background-color: #cd0362;
  border-color: #fff;
}

Our output should look something like the below image:

Now that we have created the styles for bigger screens, lets now make it responsive to mid-screens and small-screens as well.
Remember in the beginning I said that we are going to create a animated toggler button as well.

Lets come back to our index.html and create 3 div's and give each of them a class name one, two, three respectively. we will create them just below the nav__menu section;

    <div class="nav__toggler toggleIcon">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
        </div>

Also let us style the above togglerIcon which we just created.
Come back to styles.css and paste the following code;

.nav__toggler div {
  width: 3rem;
  height: 0.2rem;
  margin: 0.4rem;
  background: #909090;
  transition: 0.4s ease-in-out;
}

Our navbar so far should look like the blow image;

But also know that we do not want to display the toggler Icon on the Bigger-screen sizes. We will display it only on the Medium and smaller screen sizes. so lets add the following code in the styles.css file.

.nav__toggler {
  cursor: pointer;
  display: none;
}

Now that we have created our Navbar let us write some media queries to make it responsive.

Style for Small & Medium Screen sizes

@media screen and (max-width: 900px) {
  .nav__toggler {
    display: block;
  }
  .nav__menu {
    position: fixed;
    top: 9.5vh;
    right: 0;
    width: 50%;
    height: 90vh;
    background: #00003f;
    flex-direction: column;
    z-index: 999;
    transform: translateX(0);
  }
  .nav__items {
    flex-direction: column;
  }
  .nav__btns {
    margin-left: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3rem;
  }
}

Now we want to toggle the active class when we click on the hamburger icon the navbar should be displayed and when we click again it should hide it. For this we will need to write simple javaScript.
Before that let us define the .nav__active class in our style sheet

.nav__active {
  transform: translateX(0);
}

That should do the trick for us.

As this is just a small tutorial I will write the script in index.html just before the closing body tag.

<script>
      const toggler = document.querySelector(".nav__toggler");
      toggler.addEventListener("click", activeClass);
      function activeClass() {
        document.querySelector("#navMenu").classList.toggle("nav__active");
      }
    </script>

lets understand the above code.

we are grabbing the toggler button and storing in a variable.
Then we have added a event listener to our toggleIcon;
on click it will fire a function activeClass().
in this function we are toggling the activeClass,meaning if the class is present it will remove it and vice versa.

our output should look something like the below gif.

Only one thing remaining now is to animate the toggler/menu icon;
to do that we need to write the following line of code in our javascript function.

function activeClass() {
        document.querySelector("#navMenu").classList.toggle("nav__active");
        document.querySelector("#toggleIcon").classList.toggle("toggleIcon");
      }

we are toggling class for our menu icon on the click.
Lets also define the toggleIcon class for our animation, to so that come back to our styles.css file and write the below code.

toggleIcon .one {
  transform: rotate(-45deg) translate(-4px, 5px);
}
.toggleIcon .two {
  opacity: 0;
}
.toggleIcon .three {
  transform: rotate(45deg) translate(-4px, -5px);
}

Output should look similar to the below image...

We have reached the end of our tutorial. Hope you guys have loved it.

Please do not forget to give a reaction and if you have not already please give a follow, This encourages me to create more creative posts like this one.

Have a great day!!!

Blog

How to Create a Responsive Navbar with Toggler Button Animation Using Flexbox?

Shameer Chagani

Join Our Newsletter. No Spam, Only the good stuff.

Related