Responsive Navbar With Morph Effect

Preview:

Description:

An awesome responsive navbar that switches to a hamburger navigation when the maximum screen width is reached (defaults to 800px).

Clicking the hamburger will morph the toggle button into a fullscreen nav menu using CSS clip-path.

How to use it:

1. Create the HTML for the responsive navbar.

<nav>
  <!-- Site Logo -->
  <div class="logo">
    <img src="logo.svg" alt="Logo Image">
  </div>
  <!-- Hamburger Button -->
  <div class="hamburger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
  </div>
  <!-- Nav List -->
  <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><button class="login-button" href="#">Login</button></li>
      <li><button class="register-button" href="#">Register</button></li>
  </ul>
</nav>

2. The main styles for the navbar.

/* main */
nav{
  height: 6rem;
  width: 100vw;
  background-color: #131418;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  position: fixed;
  z-index: 10;
}
/ LOGO */
.logo{
  padding:1vh 1vw;
  text-align: center;
}
.logo img {
  height: 5rem;
  width: 5rem;
}
/* nav links */
.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%;
}

3. Stying for small screens.

@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;
  }
  .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;
  }
}

4. Style & animate the hamburger button.

.hamburger div{
  width: 30px;
  height:3px;
  background: #f2f5f7;
  margin: 5px;
  transition: all 0.3s ease;
}
.hamburger{
  display: none;
}
.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);
}

5. The main JavaScript to activate the morph effect.

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");
});