How to Create a Animated Responsive Navbar

5 min readSep 24, 2019

Animated Navbar responsive on different screen sizes using HTML, CSS (FlexBox, clip-path) and JS for clickable events

While diving deeper into CSS, I came to know about clip-path property and then thought of implementing it in a navbar when a user clicks on a hamburger icon it animates from top-right to bottom-left in a circular pattern. I have used Flexbox and also added a animation effect on nav links using transition property as user hovers over it.

HTML

Start with the basic markup layout

<nav>
 <div class="logo">
  <img src="logo.svg" alt="">
 </div>
 <ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">Solutions</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><button class="login-button" href="#">Login</button></li>
  <li><button class="join-button" href="#">Join</button></li>
 </ul>
</nav>

Output:

Adding another <div> for hamburger icon(would only be visible for small screen sizes)

<nav>
 <div class="logo">
  <img src="logo.svg" alt="">
 </div>
 <div class="hamburger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
 </div>
 <ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">Solutions</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><button class="login-button" href="#">Login</button></li>
  <li><button class="join-button" href="#">Join</button></li>
 </ul>
</nav>

Styling

CSS

Now heading to our CSS File, remove default margin and padding:

*{
margin: 0;
padding: 0;
color: #f2f5f7;
font-family: sans-serif;
letter-spacing: 1px; //gap between each letter
font-weight: 300;
}
body{
overflow-x: hidden;
}

Styling nav

Setting position to fixed and z-index to 10 to keep nav at top of every content on the page as we scroll down.

nav{
height: 12vh;
width: 100vw;
background-color: #131418;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
display: flex;
position: fixed;
z-index: 10;
}
.logo{
padding:1vh 1vw;
text-align: center;
}
.logo img {
height: 10vh;
width: 10vw;}

Output:

Styling nav-links (large screen size)

Styling list items and setting justify-content:space-evenly to distribute the extra free space. Applying animation effects using transition as we hover over a list item. Also keep in mind that defining position:relative is very important for animations to properly take effect.

We will also add styles for the hamburger icon and set it display:none as we don’t want it to appear on large screen sizes

.nav-links{
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a{
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before{
width: 80%;
}
.login-button{
background-color: transparent;
border: 1.5px solid #f2f5f7;
border-radius: 2em;
padding: 2vh 2vw;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #f2f5f7;
border:1.5px solid #f2f5f7;
transition: all ease-in-out 350ms;
}
.join-button{
color: #131418;
background-color: #61DAFB;
border: 1.5px solid #61DAFB;
border-radius: 2em;
padding: 2vh 2vw;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
border:1.5px solid #f2f5f7;
transition: all ease-in-out 350ms;
}
.hamburger div{
width: 30px;
height:3px;
background: #f2f5f7;
margin: 5px;
transition: all 0.3s ease;
}
.hamburger{
display: none;
}

Output:

Large Screens Output

Styling nav-links (small screen size)

Now we have designed navbar for large-screen sizes, we will now add styles for small screen sizes. We will now make use of clip-path to animate the mobile view when icon is clicked. Also add styles to each child of lists to take effect with transitions.

@media screen and (max-width: 800px){
nav{
position: fixed;
z-index: 3;
}
.hamburger{
display:block;
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
transition: all 0.7s ease;
}
.nav-links{
position: fixed;
background: #131418;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(50px at 90% -20%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open{
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing{
flex-direction: column;
}
.nav-links li{
opacity: 0;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4){
transition: all 0.5s ease 0.7s;
}
.nav-links li:nth-child(5){
transition: all 0.5s ease 0.8s;
}
.nav-links li:nth-child(6){
transition: all 0.5s ease 0.9s;
margin: 0;
}
.nav-links li:nth-child(7){
transition: all 0.5s ease 1s;
margin: 0;
}
li.fade{
opacity: 1;
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
transition: all 0.7s ease;
width:0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}

JavaScript

We will now add click events which gets triggered as user clicks the hamburger icon and opens links in mobile view. Also make sure to save file with name of nav.js

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");hamburger.addEventListener('click', ()=>{//Animate Links
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});//Hamburger Animation
hamburger.classList.toggle("toggle");
});