[Morph Effect] Responsive Animated Navbar Using Flex and Clip-Path

Animated navigation bar with flex and clip-path is a great responsive navigation bar that switches to hamburger navigation when the maximum screen width is reached: defaults are 800px.

Clicking on the hamburger will turn the toggle button into a full-screen navigation menu with the CSS clip path.

Must Read: Responsive Navbar Active Animation to Bootstrap 4

How to make use of it:

1. Create the HTML for the responsive navbar.

  <!-- Site Logo -->
  <div class="logo">
    <img src="logo.svg" alt="Logo Image">
  <!-- Hamburger Button -->
  <div class="hamburger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></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>

2. The foremost styles for the navbar.

/* main */
  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 */
  padding:1vh 1vw;
  text-align: center;
.logo img {
  height: 5rem;
  width: 5rem;

/* 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){
    position: fixed;
    z-index: 3;

    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
    transition: all 0.7s ease;

    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;
    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;
    opacity: 1;

4. Style & animate the hamburger button.

.hamburger div{
  width: 30px;
  background: #f2f5f7;
  margin: 5px;
  transition: all 0.3s ease;

  display: none;

.toggle .line1{
  transform: rotate(-45deg) translate(-5px,6px);

.toggle .line2{
  transition: all 0.7s ease;

.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);

5. The most important 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
  links.forEach(link => {
  //Hamburger Animation

Read More –

Responsive Hamburger Overlay Side Menu With Pure HTML & CSS
[Dashboard] Starter Bootstrap 4 HTML Admin Website Templates | BS4 Flex Sidenav

See Demo And Download

Official Website(hitensharma): Click Here

This superior jQuery/javascript plugin is developed by hitensharma. For extra Advanced Usage, please go to the official website.