Responsive Mega Menu | Bootstrap Mega Menu Tutorials

Learn how to create a Responsive Mega Menu built with Bootstrap 5 (full-width dropdown menu in a navigation bar). Create horizontal, vertical and accordion mega menus in mobile device a few simple steps. Easy to use bootstrap mega menu HTML, CSS and plugin.

JavaScript based mega menu, designed to be added to any of our sites, a mega menu is a dropdown menu that contains multiple levels and multiple levels with submenu. It allows a lot of links to be contained in a single dropdown with submenu and search function without compromising the usability. Bootstrap example of Bootstrap 5 Mega Menu using HTML, JavaScript, jQuery, and CSS.

Examples of megamenu dropdown on click or hover.

HTML

<header class="header_area">
  <div class="main_header_area animated">
    <div class="container">
      <nav id="navigation1" class="navigation">
        <div class="nav-header">
          <a class="nav-brand" href="#">LOGO</a>
          <div class="nav-toggle"></div>
        </div>
        <div class="nav-search">
          <div class="nav-search-button"><i class="nav-search-icon"></i></div>
          <form>
            <div class="nav-search-inner">
              <input type="search" name="search" placeholder="Search..."/>
            </div>
          </form>
        </div>
        <div class="nav-menus-wrapper">
          <ul class="nav-menu align-to-right">
            <li><a href="#" target="_blank">Home</a></li>
            <li>
              <a href="#">Dropdown Menu</a>
              <ul class="nav-dropdown">
                <li>
                  <a href="#">Menu Level 2</a>
                  <ul class="nav-dropdown">
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                    <li><a href="#" target="_blank">Link 6</a></li>
                    <li><a href="#" target="_blank">Link 7</a></li>
                    <li><a href="#" target="_blank">Link 8</a></li>
                    <li><a href="#" target="_blank">Link 9</a></li>
                    <li><a href="#" target="_blank">Link 10</a></li>
                  </ul>
                </li>
                <li>
                  <a href="#">Menu Level 2</a>
                  <ul class="nav-dropdown">
                    <li>    
                      <a href="#">Menu Level 3</a>
                      <ul class="nav-dropdown">
                        <li><a href="#" target="_blank">Link 1</a></li>
                        <li><a href="#" target="_blank">Link 2</a></li>
                        <li><a href="#" target="_blank">Link 3</a></li>
                        <li><a href="#" target="_blank">Link 4</a></li>
                        <li><a href="#" target="_blank">Link 5</a></li>
                      </ul>
                    </li>
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                  </ul>
                </li>
                <li>
                  <a href="#">Menu Level 2</a>
                  <ul class="nav-dropdown">
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                  </ul>
                </li>
                <li><a href="#" target="_blank">Link 1</a></li>
                <li><a href="#" target="_blank">Link 2</a></li>
                <li><a href="#" target="_blank">Link 3</a></li>
                <li><a href="#" target="_blank">Link 4</a></li>
                <li><a href="#" target="_blank">Link 5</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Mega Menu</a>
              <div class="megamenu-panel">
                <div class="megamenu-lists">
                  <ul class="megamenu-list list-col-4">
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                    <li><a href="#" target="_blank">Link 6</a></li>
                    <li><a href="#" target="_blank">Link 7</a></li>
                    <li><a href="#" target="_blank">Link 8</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                    <li><a href="#" target="_blank">Link 6</a></li>
                    <li><a href="#" target="_blank">Link 7</a></li>
                    <li><a href="#" target="_blank">Link 8</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                    <li><a href="#" target="_blank">Link 6</a></li>
                    <li><a href="#" target="_blank">Link 7</a></li>
                    <li><a href="#" target="_blank">Link 8</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                    <li><a href="#" target="_blank">Link 6</a></li>
                    <li><a href="#" target="_blank">Link 7</a></li>
                    <li><a href="#" target="_blank">Link 8</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">Mega Menu 2</a>
              <div class="megamenu-panel">
                <div class="megamenu-lists">
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="#">Title Name</a></li>
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="#">Title Name</a></li>
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="#">Title Name</a></li>
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                  </ul>
                  <ul class="megamenu-list list-col-4">
                    <li class="megamenu-list-title"><a href="#">Title Name</a></li>
                    <li><a href="#" target="_blank">Link 1</a></li>
                    <li><a href="#" target="_blank">Link 2</a></li>
                    <li><a href="#" target="_blank">Link 3</a></li>
                    <li><a href="#" target="_blank">Link 4</a></li>
                    <li><a href="#" target="_blank">Link 5</a></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>

CSS

.navigation {
  width: 100%;
  height: 70px;
  display: table;
  position: relative;
  font-family: inherit;
  background-color: #fff;
}

.navigation * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.navigation-portrait {
  height: 48px;
}

.navigation-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 19998;
}

.navigation-hidden {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.align-to-right {
  float: right;
}

.nav-header {
  float: left;
}

.navigation-hidden .nav-header {
  display: none;
}

.nav-brand {
  line-height: 70px;
  padding: 0;
  color: #343a40;
  font-size: 24px;
  text-decoration: none !important;
}

.nav-brand:hover,
.nav-brand:focus {
  color: #343a40;
}

.navigation-portrait .nav-brand {
  font-size: 18px;
  line-height: 48px;
}

.nav-logo > img {
  height: 48px;
  margin: 11px auto;
  padding: 0 15px;
  float: left;
}

.nav-logo:focus > img {
  outline: initial;
}

.navigation-portrait .nav-logo > img {
  height: 36px;
  margin: 6px auto 6px 15px;
  padding: 0;
}

.nav-toggle {
  width: 30px;
  height: 30px;
  padding: 6px 2px 0;
  position: absolute;
  top: 50%;
  margin-top: -14px;
  right: 15px;
  display: none;
  cursor: pointer;
}

.nav-toggle:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: #343a40;
  border-radius: 10px;
  box-shadow: 0 0.5em 0 0 #343a40, 0 1em 0 0 #343a40;
}

.navigation-portrait .nav-toggle {
  display: block;
}

.navigation-portrait .nav-menus-wrapper {
  width: 320px;
  height: 100%;
  top: 0;
  left: -400px;
  position: fixed;
  background-color: #fff;
  z-index: 20000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right {
  left: auto;
  right: -400px;
}

.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open {
  left: 0;
}

.navigation-portrait
  .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open {
  left: auto;
  right: 0;
}

.nav-menus-wrapper-close-button {
  width: 30px;
  height: 40px;
  margin: 10px 7px;
  display: none;
  float: right;
  color: #343a40;
  font-size: 26px;
  cursor: pointer;
}

.navigation-portrait .nav-menus-wrapper-close-button {
  display: block;
}

.nav-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
  font-size: 0;
}

.navigation-portrait .nav-menu {
  width: 100%;
}

.navigation-landscape .nav-menu.nav-menu-centered {
  float: none;
  text-align: center;
}

.navigation-landscape .nav-menu.nav-menu-centered > li {
  float: none;
}

.nav-menu > li {
  display: inline-block;
  float: left;
  text-align: left;
}

.navigation-portrait .nav-menu > li {
  width: 100%;
  position: relative;
  border-top: solid 1px #f0f0f0;
}

.navigation-portrait .nav-menu > li:last-child {
  border-bottom: solid 1px #f0f0f0;
}

.nav-menu + .nav-menu > li:first-child {
  border-top: none;
}

.nav-menu > li > a {
  height: 70px;
  padding: 26px 15px;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  color: #343a40;
  transition: color 0.3s, background 0.3s;
}

.navigation-portrait .nav-menu > li > a {
  width: 100%;
  height: auto;
  padding: 12px 15px 12px 26px;
}

.nav-menu > li:hover > a,
.nav-menu > li.active > a,
.nav-menu > li.focus > a {
  color: #ff6b00;
}

.nav-menu > li > a > i,
.nav-menu > li > a > [class*="ion-"] {
  width: 18px;
  height: 16px;
  line-height: 16px;
  transform: scale(1.4);
}

.nav-menu > li > a > [class*="ion-"] {
  width: 16px;
  display: inline-block;
  transform: scale(1.8);
}

.navigation-portrait .nav-menu.nav-menu-social {
  width: 100%;
  text-align: center;
}

.nav-menu.nav-menu-social > li {
  text-align: center;
  float: none;
  border: none !important;
}

.navigation-portrait .nav-menu.nav-menu-social > li {
  width: auto;
}

.nav-menu.nav-menu-social > li > a > [class*="ion-"] {
  font-size: 12px;
}

.nav-menu.nav-menu-social > li > a > .fa {
  font-size: 14px;
}

.navigation-portrait .nav-menu.nav-menu-social > li > a {
  padding: 15px;
}

.submenu-indicator {
  margin-left: 6px;
  margin-top: 6px;
  float: right;
  transition: all 0.2s;
}

.navigation-portrait .submenu-indicator {
  width: 54px;
  height: 44px;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  z-index: 20000;
}

.submenu-indicator-chevron {
  height: 6px;
  width: 6px;
  display: block;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: transparent #70798b #70798b transparent;
  transform: rotate(45deg);
  transition: border 0.2s;
}

.navigation-portrait .submenu-indicator-chevron {
  position: absolute;
  top: 18px;
  left: 24px;
}

.nav-menu > li:hover > a .submenu-indicator-chevron,
.nav-menu > .active > a .submenu-indicator-chevron,
.nav-menu > .focus > a .submenu-indicator-chevron {
  border-color: transparent #967adc #967adc transparent;
}

.navigation-portrait .submenu-indicator.submenu-indicator-up {
  transform: rotate(-180deg);
}

.nav-overlay-panel {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: none;
  z-index: 19999;
}

.no-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nav-search {
  height: 70px;
  float: right;
  z-index: 19998;
}

.navigation-portrait .nav-search {
  height: 48px;
  padding: 0 10px;
  margin-right: 52px;
}

.navigation-hidden .nav-search {
  display: none;
}

.nav-search-button {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  cursor: pointer;
  background-color: #fbfcfd;
}

.navigation-portrait .nav-search-button {
  width: 50px;
  height: 48px;
  line-height: 46px;
  font-size: 22px;
}

.nav-search-icon {
  width: 14px;
  height: 14px;
  margin: 2px 8px 8px 4px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  color: #343a40;
  text-align: left;
  text-indent: -9999px;
  border: 2px solid;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.nav-search-icon:after,
.nav-search-icon:before {
  content: "";
  pointer-events: none;
}

.nav-search-icon:before {
  width: 2px;
  height: 11px;
  top: 11px;
  position: absolute;
  left: 50%;
  border-radius: 0 0 1px 1px;
  box-shadow: inset 0 0 0 32px;
  transform: translateX(-50%);
}

.nav-search-button:hover .nav-search-icon {
  color: #ff6b00;
}

.nav-search > form {
  width: 100%;
  height: 100%;
  padding: 0 auto;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 99;
}

.nav-search-inner {
  width: 70%;
  height: 70px;
  margin: auto;
  display: table;
}

.navigation-portrait .nav-search-inner {
  height: 48px;
}

.nav-search-inner input[type="text"],
.nav-search-inner input[type="search"] {
  height: 70px;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  font-size: 26px;
  text-align: center;
  color: #343a40;
  outline: none;
  line-height: 70px;
  border: none;
  background-color: transparent;
  transition: all 0.3s;
}

.navigation-portrait .nav-search-inner input[type="text"],
.navigation-portrait .nav-search-inner input[type="search"] {
  height: 48px;
  font-size: 18px;
  line-height: 48px;
}

.nav-search-close-button {
  width: 28px;
  height: 28px;
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  line-height: normal;
  color: #343a40;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}

.navigation-portrait .nav-search-close-button {
  top: 10px;
  right: 14px;
}

.nav-button {
  margin: 18px 15px 0;
  padding: 8px 14px;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}

.nav-button:hover,
.nav-button:focus {
  color: #fff;
  text-decoration: none;
}

.navigation-portrait .nav-button {
  width: calc(100% - 52px);
  margin: 17px 26px;
}

.nav-text {
  margin: 25px 15px;
  display: inline-block;
  color: #343a40;
  font-size: 14px;
}

.navigation-portrait .nav-text {
  width: calc(100% - 52px);
  margin: 12px 26px 0;
}

.navigation-portrait .nav-text + ul {
  margin-top: 15px;
}

.nav-dropdown {
  min-width: 180px;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  list-style: none;
  z-index: 98;
  white-space: nowrap;
}

.navigation-portrait .nav-dropdown {
  width: 100%;
  position: static;
  left: 0;
}

.nav-dropdown .nav-dropdown {
  left: 100%;
}

.nav-menu > li > .nav-dropdown {
  border-top: solid 1px #f0f0f0;
}

.nav-dropdown > li {
  width: 100%;
  float: left;
  clear: both;
  position: relative;
  text-align: left;
}

.nav-dropdown > li > a {
  width: 100%;
  padding: 16px 20px;
  display: inline-block;
  text-decoration: none;
  float: left;
  font-size: 13px;
  color: #343a40;
  background-color: #fdfdfd;
}

.nav-dropdown > li:hover > a,
.nav-dropdown > li.focus > a {
  color: #ff6b00;
}

.nav-dropdown.nav-dropdown-left {
  right: 0;
}

.nav-dropdown > li > .nav-dropdown-left {
  left: auto;
  right: 100%;
}

.navigation-landscape .nav-dropdown.nav-dropdown-left > li > a {
  text-align: right;
}

.navigation-portrait .nav-dropdown > li > a {
  padding: 12px 20px 12px 30px;
}

.navigation-portrait .nav-dropdown > li > ul > li > a {
  padding-left: 50px;
}

.navigation-portrait .nav-dropdown > li > ul > li > ul > li > a {
  padding-left: 70px;
}

.navigation-portrait .nav-dropdown > li > ul > li > ul > li > ul > li > a {
  padding-left: 90px;
}

.navigation-portrait
  .nav-dropdown
  > li
  > ul
  > li
  > ul
  > li
  > ul
  > li
  > ul
  > li
  > a {
  padding-left: 110px;
}

.nav-dropdown .submenu-indicator {
  right: 15px;
  top: 10px;
  position: absolute;
}

.navigation-portrait .nav-dropdown .submenu-indicator {
  right: 0;
  top: 0;
}

.nav-dropdown .submenu-indicator .submenu-indicator-chevron {
  transform: rotate(-45deg);
}

.navigation-portrait
  .nav-dropdown
  .submenu-indicator
  .submenu-indicator-chevron {
  transform: rotate(45deg);
}

.nav-dropdown > li:hover > a .submenu-indicator-chevron,
.nav-dropdown > .focus > a .submenu-indicator-chevron {
  border-color: transparent #ff6b00 #ff6b00 transparent;
}

.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator {
  left: 10px;
}

.navigation-landscape
  .nav-dropdown.nav-dropdown-left
  .submenu-indicator
  .submenu-indicator-chevron {
  transform: rotate(135deg);
}
.nav-dropdown-horizontal {
  width: 100%;
  left: 0;
  background-color: #fdfdfd;
  border-top: solid 1px #f0f0f0;
}

.nav-dropdown-horizontal .nav-dropdown-horizontal {
  width: 100%;
  top: 100%;
  left: 0;
}

.navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal {
  border-top: none;
}

.nav-dropdown-horizontal > li {
  width: auto;
  clear: none;
  position: static;
}

.navigation-portrait .nav-dropdown-horizontal > li {
  width: 100%;
}

.nav-dropdown-horizontal > li > a {
  position: relative;
}

.nav-dropdown-horizontal .submenu-indicator {
  height: 18px;
  top: 11px;
  transform: rotate(90deg);
}

.navigation-portrait .nav-dropdown-horizontal .submenu-indicator {
  height: 42px;
  top: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.navigation-portrait
  .nav-dropdown-horizontal
  .submenu-indicator.submenu-indicator-up {
  transform: rotate(-180deg);
}

.megamenu-panel {
  width: 100%;
  padding: 15px;
  display: none;
  position: absolute;
  font-size: 14px;
  z-index: 98;
  text-align: left;
  color: inherit;
  border-top: solid 1px #f0f0f0;
  background-color: #fdfdfd;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.075);
}

.navigation-portrait .megamenu-panel {
  padding: 25px;
  position: static;
  display: block;
}

.megamenu-panel [class*="container"] {
  width: 100%;
}

.megamenu-panel [class*="container"] [class*="col-"] {
  padding: 0;
}

.megamenu-panel-half {
  width: 50%;
}

.megamenu-panel-quarter {
  width: 25%;
}

.navigation-portrait .megamenu-panel-half,
.navigation-portrait .megamenu-panel-quarter {
  width: 100%;
}

.megamenu-panel-row {
  width: 100%;
}

.megamenu-panel-row:before,
.megamenu-panel-row:after {
  content: "";
  display: table;
  line-height: 0;
}

.megamenu-panel-row:after {
  clear: both;
}

.megamenu-panel-row [class*="col-"] {
  display: block;
  min-height: 20px;
  float: left;
  margin-left: 3%;
}

.megamenu-panel-row [class*="col-"]:first-child {
  margin-left: 0;
}

.navigation-portrait .megamenu-panel-row [class*="col-"] {
  float: none;
  display: block;
  width: 100% !important;
  margin-left: 0;
  margin-top: 15px;
}

.navigation-portrait
  .megamenu-panel-row:first-child
  [class*="col-"]:first-child {
  margin-top: 0;
}

.megamenu-panel-row .col-1 {
  width: 5.583333333333%;
}

.megamenu-panel-row .col-2 {
  width: 14.166666666666%;
}

.megamenu-panel-row .col-3 {
  width: 22.75%;
}

.megamenu-panel-row .col-4 {
  width: 31.333333333333%;
}

.megamenu-panel-row .col-5 {
  width: 39.916666666667%;
}

.megamenu-panel-row .col-6 {
  width: 48.5%;
}

.megamenu-panel-row .col-7 {
  width: 57.083333333333%;
}

.megamenu-panel-row .col-8 {
  width: 65.666666666667%;
}

.megamenu-panel-row .col-9 {
  width: 74.25%;
}

.megamenu-panel-row .col-10 {
  width: 82.833333333334%;
}

.megamenu-panel-row .col-11 {
  width: 91.416666666667%;
}

.megamenu-panel-row .col-12 {
  width: 100%;
}

.megamenu-tabs {
  width: 100%;
  float: left;
  display: block;
}

.megamenu-tabs-nav {
  width: 20%;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.navigation-portrait .megamenu-tabs-nav {
  width: 100%;
}

.megamenu-tabs-nav > li > a {
  width: 100%;
  padding: 10px 16px;
  float: left;
  font-size: 13px;
  text-decoration: none;
  color: #343a40;
  border: solid 1px #eff0f2;
  outline: 0;
  background-color: #fff;
}

.megamenu-tabs-nav > li.active a,
.megamenu-tabs-nav > li:hover a {
  background-color: #f5f5f5;
}

.megamenu-tabs-pane {
  width: 80%;
  min-height: 30px;
  padding: 20px;
  float: right;
  display: none;
  font-size: 13px;
  color: #343a40;
  border: solid 1px #eff0f2;
  background-color: #fff;
}

.megamenu-tabs-pane.active {
  display: block;
}

.navigation-portrait .megamenu-tabs-pane {
  width: 100%;
}

.megamenu-lists {
  width: 100%;
  display: table;
}

.megamenu-list {
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  display: inline-block;
  float: left;
  list-style: none;
}

.megamenu-list:last-child {
  margin: 0;
  border: none;
}

.navigation-landscape .megamenu-list {
  margin: -15px 0;
  padding: 20px 0;
  border-right: solid 1px #f0f0f0;
}

.navigation-landscape .megamenu-list:last-child {
  border: none;
}

.megamenu-list > li > a {
  width: 100%;
  padding: 10px 15px;
  display: inline-block;
  color: #343a40;
  text-decoration: none;
  font-size: 13px;
}

.megamenu-list > li > a:hover {
  background-color: #ff6b00;
  color: #fff;
}

.megamenu-list > li.megamenu-list-title > a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #343a40;
}

.megamenu-list > li.megamenu-list-title > a:hover {
  background-color: transparent;
}

.navigation-landscape .list-col-2 {
  width: 50%;
}

.navigation-landscape .list-col-3 {
  width: 33%;
}

.navigation-landscape .list-col-4 {
  width: 25%;
}

.navigation-landscape .list-col-5 {
  width: 20%;
}

.nav-menu > li > a {
  color: #343a40;
  text-transform: uppercase;
}

.nav-dropdown > li > a {
  color: #343a40;
  padding: 10px 20px;
  border-bottom: 1px solid #f6f6f6;
}

.nav-dropdown > li > a:hover,
.nav-dropdown > li > a:focus {
  color: #ff6b00;
}

.main_header_area.sticky {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.transparent-menu {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}

.navigation-portrait .nav-menu > li > a {
  width: 100%;
  height: auto;
  padding: 10px 10px 10px 30px;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .nav-dropdown > li > a,
  .megamenu-list > li > a {
    width: 65%;
  }
}

JavaScript

!(function(n, i, e, a) {
    ;(n.navigation = function(t, s) {
      var o = {
          responsive: !0,
          mobileBreakpoint: 991,
          showDuration: 200,
          hideDuration: 200,
          showDelayDuration: 0,
          hideDelayDuration: 0,
          submenuTrigger: "hover",
          effect: "fadeIn",
          submenuIndicator: !0,
          submenuIndicatorTrigger: !1,
          hideSubWhenGoOut: !0,
          visibleSubmenusOnMobile: !1,
          fixed: !1,
          overlay: !0,
          overlayColor: "rgba(0, 0, 0, 0.5)",
          hidden: !1,
          hiddenOnMobile: !1,
          offCanvasSide: "left",
          offCanvasCloseButton: !0,
          animationOnShow: "",
          animationOnHide: "",
          onInit: function() {},
          onLandscape: function() {},
          onPortrait: function() {},
          onShowOffCanvas: function() {},
          onHideOffCanvas: function() {}
        },
        r = this,
        u = Number.MAX_VALUE,
        d = 1,
        l = "click.nav touchstart.nav",
        f = "mouseenter focusin",
        c = "mouseleave focusout"
      r.settings = {}
      var t = (n(t), t)
      n(t).find(".nav-search").length > 0 &&
        n(t)
          .find(".nav-search")
          .find("form")
          .prepend(
            "✕"
          ),
        (r.init = function() {
          ;(r.settings = n.extend({}, o, s)),
            r.settings.offCanvasCloseButton &&
              n(t)
                .find(".nav-menus-wrapper")
                .prepend(
                  "✕"
                ),
            "right" == r.settings.offCanvasSide &&
              n(t)
                .find(".nav-menus-wrapper")
                .addClass("nav-menus-wrapper-right"),
            r.settings.hidden &&
              (n(t).addClass("navigation-hidden"),
              (r.settings.mobileBreakpoint = 99999)),
            v(),
            r.settings.fixed && n(t).addClass("navigation-fixed"),
            n(t)
              .find(".nav-toggle")
              .on("click touchstart", function(n) {
                n.stopPropagation(),
                  n.preventDefault(),
                  r.showOffcanvas(),
                  s !== a && r.callback("onShowOffCanvas")
              }),
            n(t)
              .find(".nav-menus-wrapper-close-button")
              .on("click touchstart", function() {
                r.hideOffcanvas(), s !== a && r.callback("onHideOffCanvas")
              }),
            n(t)
              .find(".nav-search-button, .nav-search-close-button")
              .on("click touchstart keydown", function(i) {
                i.stopPropagation(), i.preventDefault()
                var e = i.keyCode || i.which
                "click" === i.type ||
                "touchstart" === i.type ||
                ("keydown" === i.type && 13 == e)
                  ? r.toggleSearch()
                  : 9 == e && n(i.target).blur()
              }),
            n(t).find(".megamenu-tabs").length > 0 && y(),
            n(i).resize(function() {
              r.initNavigationMode(C()), O(), r.settings.hiddenOnMobile && m()
            }),
            r.initNavigationMode(C()),
            r.settings.hiddenOnMobile && m(),
            s !== a && r.callback("onInit")
        })
      var h = function() {
          n(t)
            .find(".nav-submenu")
            .hide(0),
            n(t)
              .find("li")
              .removeClass("focus")
        },
        v = function() {
          n(t)
            .find("li")
            .each(function() {
              n(this).children(".nav-dropdown,.megamenu-panel").length > 0 &&
                (n(this)
                  .children(".nav-dropdown,.megamenu-panel")
                  .addClass("nav-submenu"),
                r.settings.submenuIndicator &&
                  n(this)
                    .children("a")
                    .append(
                      ""
                    ))
            })
        },
        m = function() {
          n(t).hasClass("navigation-portrait")
            ? n(t).addClass("navigation-hidden")
            : n(t).removeClass("navigation-hidden")
        }
      ;(r.showSubmenu = function(i, e) {
        C() > r.settings.mobileBreakpoint &&
          n(t)
            .find(".nav-search")
            .find("form")
            .fadeOut(),
          "fade" == e
            ? n(i)
                .children(".nav-submenu")
                .stop(!0, !0)
                .delay(r.settings.showDelayDuration)
                .fadeIn(r.settings.showDuration)
                .removeClass(r.settings.animationOnHide)
                .addClass(r.settings.animationOnShow)
            : n(i)
                .children(".nav-submenu")
                .stop(!0, !0)
                .delay(r.settings.showDelayDuration)
                .slideDown(r.settings.showDuration)
                .removeClass(r.settings.animationOnHide)
                .addClass(r.settings.animationOnShow),
          n(i).addClass("focus")
      }),
        (r.hideSubmenu = function(i, e) {
          "fade" == e
            ? n(i)
                .find(".nav-submenu")
                .stop(!0, !0)
                .delay(r.settings.hideDelayDuration)
                .fadeOut(r.settings.hideDuration)
                .removeClass(r.settings.animationOnShow)
                .addClass(r.settings.animationOnHide)
            : n(i)
                .find(".nav-submenu")
                .stop(!0, !0)
                .delay(r.settings.hideDelayDuration)
                .slideUp(r.settings.hideDuration)
                .removeClass(r.settings.animationOnShow)
                .addClass(r.settings.animationOnHide),
            n(i)
              .removeClass("focus")
              .find(".focus")
              .removeClass("focus")
        })
      var p = function() {
          n("body").addClass("no-scroll"),
            r.settings.overlay &&
              (n(t).append("
"),
              n(t)
                .find(".nav-overlay-panel")
                .css("background-color", r.settings.overlayColor)
                .fadeIn(300)
                .on("click touchstart", function(n) {
                  r.hideOffcanvas()
                }))
        },
        g = function() {
          n("body").removeClass("no-scroll"),
            r.settings.overlay &&
              n(t)
                .find(".nav-overlay-panel")
                .fadeOut(400, function() {
                  n(this).remove()
                })
        }
      ;(r.showOffcanvas = function() {
        p(),
          "left" == r.settings.offCanvasSide
            ? n(t)
                .find(".nav-menus-wrapper")
                .css("transition-property", "left")
                .addClass("nav-menus-wrapper-open")
            : n(t)
                .find(".nav-menus-wrapper")
                .css("transition-property", "right")
                .addClass("nav-menus-wrapper-open")
      }),
        (r.hideOffcanvas = function() {
          n(t)
            .find(".nav-menus-wrapper")
            .removeClass("nav-menus-wrapper-open")
            .on(
              "webkitTransitionEnd moztransitionend transitionend oTransitionEnd",
              function() {
                n(t)
                  .find(".nav-menus-wrapper")
                  .css("transition-property", "none")
                  .off()
              }
            ),
            g()
        }),
        (r.toggleOffcanvas = function() {
          C() <= r.settings.mobileBreakpoint &&
            (n(t)
              .find(".nav-menus-wrapper")
              .hasClass("nav-menus-wrapper-open")
              ? (r.hideOffcanvas(), s !== a && r.callback("onHideOffCanvas"))
              : (r.showOffcanvas(), s !== a && r.callback("onShowOffCanvas")))
        }),
        (r.toggleSearch = function() {
          "none" ==
          n(t)
            .find(".nav-search")
            .find("form")
            .css("display")
            ? (n(t)
                .find(".nav-search")
                .find("form")
                .fadeIn(200),
              n(t)
                .find(".nav-search")
                .find("input")
                .focus())
            : (n(t)
                .find(".nav-search")
                .find("form")
                .fadeOut(200),
              n(t)
                .find(".nav-search")
                .find("input")
                .blur())
        }),
        (r.initNavigationMode = function(i) {
          r.settings.responsive
            ? (i <= r.settings.mobileBreakpoint &&
                u > r.settings.mobileBreakpoint &&
                (n(t)
                  .addClass("navigation-portrait")
                  .removeClass("navigation-landscape"),
                S(),
                s !== a && r.callback("onPortrait")),
              i > r.settings.mobileBreakpoint &&
                d <= r.settings.mobileBreakpoint &&
                (n(t)
                  .addClass("navigation-landscape")
                  .removeClass("navigation-portrait"),
                k(),
                g(),
                r.hideOffcanvas(),
                s !== a && r.callback("onLandscape")),
              (u = i),
              (d = i))
            : (n(t).addClass("navigation-landscape"),
              k(),
              s !== a && r.callback("onLandscape"))
        })
      var b = function() {
          n("html").on("click.body touchstart.body", function(i) {
            0 === n(i.target).closest(".navigation").length &&
              (n(t)
                .find(".nav-submenu")
                .fadeOut(),
              n(t)
                .find(".focus")
                .removeClass("focus"),
              n(t)
                .find(".nav-search")
                .find("form")
                .fadeOut())
          })
        },
        C = function() {
          return (
            i.innerWidth || e.documentElement.clientWidth || e.body.clientWidth
          )
        },
        w = function() {
          n(t)
            .find(".nav-menu")
            .find("li, a")
            .off(l)
            .off(f)
            .off(c)
        },
        O = function() {
          if (C() > r.settings.mobileBreakpoint) {
            var i = n(t).outerWidth(!0)
            n(t)
              .find(".nav-menu")
              .children("li")
              .children(".nav-submenu")
              .each(function() {
                n(this)
                  .parent()
                  .position().left +
                  n(this).outerWidth() >
                i
                  ? n(this).css("right", 0)
                  : n(this).css("right", "auto")
              })
          }
        },
        y = function() {
          function i(i) {
            var e = n(i)
                .children(".megamenu-tabs-nav")
                .children("li"),
              a = n(i).children(".megamenu-tabs-pane")
            n(e).on("click.tabs touchstart.tabs", function(i) {
              i.stopPropagation(),
                i.preventDefault(),
                n(e).removeClass("active"),
                n(this).addClass("active"),
                n(a)
                  .hide(0)
                  .removeClass("active"),
                n(a[n(this).index()])
                  .show(0)
                  .addClass("active")
            })
          }
          if (n(t).find(".megamenu-tabs").length > 0)
            for (var e = n(t).find(".megamenu-tabs"), a = 0; a < e.length; a++)
              i(e[a])
        },
        k = function() {
          w(),
            h(),
            navigator.userAgent.match(/Mobi/i) ||
            navigator.maxTouchPoints > 0 ||
            "click" == r.settings.submenuTrigger
              ? n(t)
                  .find(".nav-menu, .nav-dropdown")
                  .children("li")
                  .children("a")
                  .on(l, function(e) {
                    if (
                      (r.hideSubmenu(
                        n(this)
                          .parent("li")
                          .siblings("li"),
                        r.settings.effect
                      ),
                      n(this)
                        .closest(".nav-menu")
                        .siblings(".nav-menu")
                        .find(".nav-submenu")
                        .fadeOut(r.settings.hideDuration),
                      n(this).siblings(".nav-submenu").length > 0)
                    ) {
                      if (
                        (e.stopPropagation(),
                        e.preventDefault(),
                        "none" ==
                          n(this)
                            .siblings(".nav-submenu")
                            .css("display"))
                      )
                        return (
                          r.showSubmenu(
                            n(this).parent("li"),
                            r.settings.effect
                          ),
                          O(),
                          !1
                        )
                      if (
                        (r.hideSubmenu(n(this).parent("li"), r.settings.effect),
                        "_blank" === n(this).attr("target") ||
                          "blank" === n(this).attr("target"))
                      )
                        i.open(n(this).attr("href"))
                      else {
                        if (
                          "#" === n(this).attr("href") ||
                          "" === n(this).attr("href") ||
                          "javascript:void(0)" === n(this).attr("href")
                        )
                          return !1
                        i.location.href = n(this).attr("href")
                      }
                    }
                  })
              : n(t)
                  .find(".nav-menu")
                  .find("li")
                  .on(f, function() {
                    r.showSubmenu(this, r.settings.effect), O()
                  })
                  .on(c, function() {
                    r.hideSubmenu(this, r.settings.effect)
                  }),
            r.settings.hideSubWhenGoOut && b()
        },
        S = function() {
          w(),
            h(),
            r.settings.visibleSubmenusOnMobile
              ? n(t)
                  .find(".nav-submenu")
                  .show(0)
              : (n(t)
                  .find(".submenu-indicator")
                  .removeClass("submenu-indicator-up"),
                r.settings.submenuIndicator &&
                r.settings.submenuIndicatorTrigger
                  ? n(t)
                      .find(".submenu-indicator")
                      .on(l, function(i) {
                        return (
                          i.stopPropagation(),
                          i.preventDefault(),
                          r.hideSubmenu(
                            n(this)
                              .parent("a")
                              .parent("li")
                              .siblings("li"),
                            "slide"
                          ),
                          r.hideSubmenu(
                            n(this)
                              .closest(".nav-menu")
                              .siblings(".nav-menu")
                              .children("li"),
                            "slide"
                          ),
                          "none" ==
                          n(this)
                            .parent("a")
                            .siblings(".nav-submenu")
                            .css("display")
                            ? (n(this).addClass("submenu-indicator-up"),
                              n(this)
                                .parent("a")
                                .parent("li")
                                .siblings("li")
                                .find(".submenu-indicator")
                                .removeClass("submenu-indicator-up"),
                              n(this)
                                .closest(".nav-menu")
                                .siblings(".nav-menu")
                                .find(".submenu-indicator")
                                .removeClass("submenu-indicator-up"),
                              r.showSubmenu(
                                n(this)
                                  .parent("a")
                                  .parent("li"),
                                "slide"
                              ),
                              !1)
                            : (n(this)
                                .parent("a")
                                .parent("li")
                                .find(".submenu-indicator")
                                .removeClass("submenu-indicator-up"),
                              void r.hideSubmenu(
                                n(this)
                                  .parent("a")
                                  .parent("li"),
                                "slide"
                              ))
                        )
                      })
                  : n(t)
                      .find(".nav-menu, .nav-dropdown")
                      .children("li")
                      .children("a")
                      .on(l, function(e) {
                        if (
                          (e.stopPropagation(),
                          e.preventDefault(),
                          r.hideSubmenu(
                            n(this)
                              .parent("li")
                              .siblings("li"),
                            r.settings.effect
                          ),
                          r.hideSubmenu(
                            n(this)
                              .closest(".nav-menu")
                              .siblings(".nav-menu")
                              .children("li"),
                            "slide"
                          ),
                          "none" ==
                            n(this)
                              .siblings(".nav-submenu")
                              .css("display"))
                        )
                          return (
                            n(this)
                              .children(".submenu-indicator")
                              .addClass("submenu-indicator-up"),
                            n(this)
                              .parent("li")
                              .siblings("li")
                              .find(".submenu-indicator")
                              .removeClass("submenu-indicator-up"),
                            n(this)
                              .closest(".nav-menu")
                              .siblings(".nav-menu")
                              .find(".submenu-indicator")
                              .removeClass("submenu-indicator-up"),
                            r.showSubmenu(n(this).parent("li"), "slide"),
                            !1
                          )
                        if (
                          (n(this)
                            .parent("li")
                            .find(".submenu-indicator")
                            .removeClass("submenu-indicator-up"),
                          r.hideSubmenu(n(this).parent("li"), "slide"),
                          "_blank" === n(this).attr("target") ||
                            "blank" === n(this).attr("target"))
                        )
                          i.open(n(this).attr("href"))
                        else {
                          if (
                            "#" === n(this).attr("href") ||
                            "" === n(this).attr("href") ||
                            "javascript:void(0)" === n(this).attr("href")
                          )
                            return !1
                          i.location.href = n(this).attr("href")
                        }
                      }))
        }
      ;(r.callback = function(n) {
        s[n] !== a && s[n].call(t)
      }),
        r.init()
    }),
      (n.fn.navigation = function(i) {
        return this.each(function() {
          if (a === n(this).data("navigation")) {
            var e = new n.navigation(this, i)
            n(this).data("navigation", e)
          }
        })
      })
  })(jQuery, window, document)

  ;(function($) {
    "use strict"

    var $window = $(window)

    if ($.fn.navigation) {
      $("#navigation1").navigation()
      $("#always-hidden-nav").navigation({
        hidden: true
      })
    }

    $window.on("load", function() {
      $("#preloader").fadeOut("slow", function() {
        $(this).remove()
      })
    })
  })(jQuery) 

Responsive Mega Menu | Bootstrap Mega Menu

Responsive mega menu, responsive mega menu bootstrap 4, responsive mega menu bootstrap 5.

Figure out how to make a Responsive Uber Menu worked with Bootstrap 5 (full-width dropdown menu in a route bar). Make flat, vertical and accordion super menus in a couple of straightforward advances. Simple to utilize bootstrap mega menu module. Documentation and models for Bootstrap’s strong, responsive route header, the navbar. Incorporates support for marking, route, and that’s just the beginning, Instances of megamenu dropdown on click or drift. JavaScript based mega menu, intended to be added to any of our destinations, a super menu is a dropdown menu that contains numerous levels. It permits a great deal of connections to be contained in a solitary dropdown without compromising the convenience. Bootstrap illustration of Bootstrap 5 Super Menu utilizing HTML, JavaScript, jQuery, and CSS. Instances of megamenu dropdown on click or drift. Resize the program window to see the responsive.