How to make a simple beautiful navbar with megamenu using HTML

The navigation bar in HTML and CSS is necessary for every website. Let’s How to make a simple beautiful navbar with Bootstrap CSS Framework and it’s awesome. This navigation bar is with following features – 

1. Mobile Support Navbar
2. Mega Menu bar
3. Dropdown Menu bar
4. Hoverable Dropdown/Mega Bar

Live Demo Link: https://kbwyc.csb.app/

Code Sandbox Link: https://codesandbox.io/s/priceless-lederberg-kbwyc-test-kbwyc?file=/index.html

Here’s the code sandbox demo link of the design.  You can get the files of HTML, CSS and JS from here.

Ok, let now talk about the system how we’ve made this mega menu bar.

CSS File:

Let’s make a top navbar with a background-color:

.topnav {
    overflow: hidden;
    background: #004080;
    font-family: 'Poppins', sans-serif;
}

Design the links/icon of navbar:

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  margin: 0 1%;
  text-decoration: none;
  font-size: 17px;
  transition: 0.5s;
}

.active {
  background-color: #2874f0;
  color: white;
}

.topnav .icon {
  display: none;
}

Design the dropdown content, links, list:

.dropdown {
  float: left;
  overflow: hidden;
  margin: 0 1%;
  transition: 0.5s;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  transition: 0.5s;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 170px;
  box-shadow: 0px 1px 7px 0px rgb(0 0 0 / 20%);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content ul {
  width: 13%;
  display: inline-block;
  vertical-align: top;
}

.dropdown-content li {
  padding: 4px 10px;
}

.dropdown-content li a {
  padding: 0px;
  font-size: 14px;
  transition: 0.5s;
}

.dropdown-content li a:hover {
  background: none;
  color: #2874f0;
}

Design the mega menu bar:

.mega-menu {
  background: linear-gradient(
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.6)
  );
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-position: bottom right;
  background-color: #fff;
  position: absolute;
  left: 0;
  min-width: 100%;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 12px;
}

Design the responsive for dropdown and mega menu bars:

@media (min-width: 600px) and (max-width: 778px) {
  .dropdown .dropbtn {
    font-size: 12px !important;

    padding: 14px 16px !important;
  }
  .topnav a {
    font-size: 12px !important;
    padding: 14px 1px !important;
  }
  a.active {
    padding: 14px 8px !important;
  }
}
@media (max-width: 900px) {
  .dropdown-content ul {
    width: 25%;
    display: inline-block;
  }
}

@media (max-width: 800px) {
  .dropdown-content ul {
    width: 40%;
    display: inline-block;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .dropdown-content ul {
    width: 90%;
    display: block;
  }
  .dropdown-content li:not(:first-child) {
    display: none;
    transition: 0.5s;
  }

  .dropdown-content ul:hover > li {
    display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Design the animation of the mega menu bar and dropdown:

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

Full Source Code of CSS Example:

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

body {
  margin: 0;
  overflow-x: hidden;
}

li {
  list-style: none;
}
.title {
  font-weight: bold;
  cursor: default;
}

.topnav {
  overflow: hidden;
  background: #004080;
  font-family: "Poppins", sans-serif;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  margin: 0 1%;
  text-decoration: none;
  font-size: 17px;
  transition: 0.5s;
}

.active {
  background-color: #2874f0;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  margin: 0 1%;
  transition: 0.5s;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  transition: 0.5s;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 170px;
  box-shadow: 0px 1px 7px 0px rgb(0 0 0 / 20%);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content ul {
  width: 13%;
  display: inline-block;
  vertical-align: top;
}

.dropdown-content li {
  padding: 4px 10px;
}

.dropdown-content li a {
  padding: 0px;
  font-size: 14px;
  transition: 0.5s;
}

.dropdown-content li a:hover {
  background: none;
  color: #2874f0;
}

.mega-menu {
  background: linear-gradient(
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.6)
  );
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-position: bottom right;
  background-color: #fff;
  position: absolute;
  left: 0;
  min-width: 100%;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 12px;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  color: #2874f0;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
@media (min-width: 600px) and (max-width: 778px) {
  .dropdown .dropbtn {
    font-size: 12px !important;

    padding: 14px 16px !important;
  }
  .topnav a {
    font-size: 12px !important;
    padding: 14px 1px !important;
  }
  a.active {
    padding: 14px 8px !important;
  }
}
@media (max-width: 900px) {
  .dropdown-content ul {
    width: 25%;
    display: inline-block;
  }
}

@media (max-width: 800px) {
  .dropdown-content ul {
    width: 40%;
    display: inline-block;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .dropdown-content ul {
    width: 90%;
    display: block;
  }
  .dropdown-content li:not(:first-child) {
    display: none;
    transition: 0.5s;
  }

  .dropdown-content ul:hover > li {
    display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}