Responsive sticky dropdown megamenu Using HTML CSS And jQuery

Responsive navigation menu comes with various styles of menu including standard menu, Megamenu, also created with clean and simple CSS, compatible with mobile devices and modern web browsers

Use Bootstrap and jQuery

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTML Code:

<div class="bd-header header-shadow bd-mega-menu">
  <div class="container">
    <div class="bd-header-container">
      <div class="logo" data-mobile-logo="https://www.deshamarbd.com/dist/img/dbd-logo.png" data-sticky-logo="https://www.deshamarbd.com/dist/img/dbd-logo.png">
        <a href="#"><img src="https://www.deshamarbd.com/dist/img/dbd-logo.png" alt="logo"/></a>
      </div>

      <!-- Burger menu -->
      <div class="burger-menu">
        <div class="line-menu line-half first-line"></div>
        <div class="line-menu"></div>
        <div class="line-menu line-half last-line"></div>
      </div>

      <!--Navigation menu-->
      <nav class="bd-menu menu-caret submenu-top-border">
        <ul>
          <li class="current-menu mega-menu"><a href="#">Home</a>
            <ul>
              <li>

                <!-- Mega menu container -->
                <div class="mega-menu-container">
                  <div class="row">

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                      <div class="mega-menu-box">
                        <div class="mega-menu-thumbnail">
                          <a href="#">
                            <img src="demo/images/mega-menu-thumbnail-01.jpg" alt="thumbnail"/>
                          </a>
                        </div>
                        <h4 class="mega-menu-heading"><a href="#">Sodales luctus nunc</a></h4>
                        <div class="mega-menu-desc">
                          Donec tellus faucibus dolor viverra neca blandit at justo pendisse dolor turpis lobortis sodales felis justo hendrerit fermentum quam fusce mattis nibh nulla.
                        </div>
                      </div>
                    </div>

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                      <div class="mega-menu-box">
                        <div class="mega-menu-thumbnail">
                          <a href="#">
                            <img src="demo/images/mega-menu-thumbnail-02.jpg" alt="thumbnail"/>
                          </a>
                        </div>
                        <h4 class="mega-menu-heading"><a href="#">Mauris cursus eros</a></h4>
                        <div class="mega-menu-desc">
                          Quisque vitae sapien neque in fusce amet enim nec nisl gravida rutrum sed id justo sem adipiscing aliquam potenti morbi vehicula.
                        </div>
                      </div>
                    </div>

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                      <div class="mega-menu-box">
                        <div class="mega-menu-thumbnail">
                          <a href="#">
                            <img src="demo/images/mega-menu-thumbnail-03.jpg" alt="thumbnail"/>
                          </a>
                        </div>
                        <h4 class="mega-menu-heading"><a href="#">Praesent nec luctus</a></h4>
                        <div class="mega-menu-desc">
                          Laoreet eu ornare at nulla sit luctus neque dapibus rhoncus malesuada metus vivamus sodales quam nullam fringilla magna ut elit varius varius lobortis hendrerit.
                        </div>
                      </div>
                    </div>

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                      <div class="mega-menu-box">
                        <div class="mega-menu-thumbnail">
                          <a href="#">
                            <img src="demo/images/mega-menu-thumbnail-04.jpg" alt="thumbnail"/>
                          </a>
                        </div>
                        <h4 class="mega-menu-heading"><a href="#">Etiam semper mauris</a></h4>
                        <div class="mega-menu-desc">
                          Placerat justo vitae massa molestie vehicula ultricies pharetra nisl sem fermentum a sollicitudin sed nam dapibus ultrices justo sed sem congue molestie.
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

              </li>
            </ul>
          </li>
          <li class="mega-menu"><a href="#">About Us</a>
            <ul>
              <li>

                <!-- Mega menu container -->
                <div class="mega-menu-container">
                  <div class="row">

                    <!-- Column -->
                    <div class="col-lg-4">

                      <div class="mega-menu-box">
                        <div class="mega-menu-media">
                          <div class="mega-menu-media-img">
                            <div class="mega-menu-thumbnail">
                              <a href="#">
                                <img src="demo/images/mega-menu-thumbnail-05.jpg" alt="thumbnail"/>
                              </a>
                            </div>
                          </div>
                          <div class="mega-menu-media-info">
                            <h4 class="mega-menu-heading"><a href="#">Aliquam metus vitae</a></h4>
                            <div class="mega-menu-desc">
                              Donec nec faucibus lobortis viverra blandit sem justo
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="mega-menu-box">
                        <div class="mega-menu-media">
                          <div class="mega-menu-media-img">
                            <div class="mega-menu-thumbnail">
                              <a href="#">
                                <img src="demo/images/mega-menu-thumbnail-06.jpg" alt="thumbnail"/>
                              </a>
                            </div>
                          </div>
                          <div class="mega-menu-media-info">
                            <h4 class="mega-menu-heading"><a href="#">Donec neca faucibus</a></h4>
                            <div class="mega-menu-desc">
                              Aliquam ultrices ullamcoroe ultrices gravida dictum
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="mega-menu-box">
                        <div class="mega-menu-media">
                          <div class="mega-menu-media-img">
                            <div class="mega-menu-thumbnail">
                              <a href="#">
                                <img src="demo/images/mega-menu-thumbnail-07.jpg" alt="thumbnail"/>
                              </a>
                            </div>
                          </div>
                          <div class="mega-menu-media-info">
                            <h4 class="mega-menu-heading"><a href="#">Lobortis sem mauris</a></h4>
                            <div class="mega-menu-desc">
                              Integer aliquet magna neca tellus orci quis semper
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>

                    <!-- Column -->
                    <div class="col-lg-4">

                      <div class="mega-menu-box">
                        <div class="mega-menu-media">
                          <div class="mega-menu-media-img">
                            <div class="mega-menu-thumbnail">
                              <a href="#">
                                <img src="demo/images/mega-menu-thumbnail-08.jpg" alt="thumbnail"/>
                              </a>
                            </div>
                          </div>
                          <div class="mega-menu-media-info">
                            <h4 class="mega-menu-heading"><a href="#">Fusce semper ante</a></h4>
                            <div class="mega-menu-desc">
                              Laoreet tellus a consectetur bibendum dolor posuere
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="mega-menu-box">
                        <div class="mega-menu-media">
                          <div class="mega-menu-media-img">
                            <div class="mega-menu-thumbnail">
                              <a href="#">
                                <img src="demo/images/mega-menu-thumbnail-09.jpg" alt="thumbnail"/>
                              </a>
                            </div>
                          </div>
                          <div class="mega-menu-media-info">
                            <h4 class="mega-menu-heading"><a href="#">Aliquam ipsum sem</a></h4>
                            <div class="mega-menu-desc">
                              Sollicitudin ut gravida libero commodo sit malesuada
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="mega-menu-box">
                        <div class="mega-menu-media">
                          <div class="mega-menu-media-img">
                            <div class="mega-menu-thumbnail">
                              <a href="#">
                                <img src="demo/images/mega-menu-thumbnail-10.jpg" alt="thumbnail"/>
                              </a>
                            </div>
                          </div>
                          <div class="mega-menu-media-info">
                            <h4 class="mega-menu-heading"><a href="#">Posuere himenaeos</a></h4>
                            <div class="mega-menu-desc">
                              Porta gravida hendrerit vitae blandit in phasellus ipsum
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>

                    <!-- Column -->
                    <div class="col-lg-4">

                      <div class="mega-menu-box">
                        <div class="mega-menu-thumbnail">
                          <a href="#">
                            <img src="demo/images/mega-menu-thumbnail-11.jpg" alt="thumbnail"/>
                          </a>
                        </div>
                        <h4 class="mega-menu-heading"><a href="#">Etiam semper mauris</a></h4>
                        <div class="mega-menu-desc">
                          Consequater placerat justo vitae massa molestie ultricies pharetra nisl sem fermentum a sollicitudin amet condimentum.
                        </div>
                      </div>

                    </div>

                  </div>
                </div>

              </li>
            </ul>
          </li>
          <li class="mega-menu"><a href="#">Shop</a>
            <ul>
              <li>

                <!-- Mega menu container -->
                <div class="mega-menu-container">
                  <div class="row">

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">

                      <div class="mega-menu-box">
                        <h4 class="mega-menu-heading"><a href="#">Aliquam metus vitae</a></h4>
                        <ul class="mega-menu-list">
                          <li>
                            <a href="#">Quisque orci augue</a>
                          </li>
                          <li>
                            <a href="#">Laoreet amet ante</a>
                          </li>
                          <li>
                            <a href="#">Aenean quam vitae</a>
                          </li>
                          <li>
                            <a href="#">Aliquam ac semper</a>
                          </li>
                          <li>
                            <a href="#">Nulla ligula puvinar</a>
                          </li>
                        </ul>
                      </div>

                      <div class="mega-menu-box">
                        <h4 class="mega-menu-heading"><a href="#">Donec neca faucibus</a></h4>
                        <ul class="mega-menu-list">
                          <li>
                            <a href="#">Laoreet amet ante</a>
                          </li>
                          <li>
                            <a href="#">Quisque orci augue</a>
                          </li>
                          <li>
                            <a href="#">Nulla ligula pulvinar</a>
                          </li>
                          <li>
                            <a href="#">Aenean quam vitae</a>
                          </li>
                          <li>
                            <a href="#">Aliquam ac lobortis</a>
                          </li>
                        </ul>
                      </div>

                    </div>

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">

                      <div class="mega-menu-box">
                        <h4 class="mega-menu-heading"><a href="#">Lobortis sem mauris</a></h4>
                        <ul class="mega-menu-list">
                          <li>
                            <a href="#">Aenean quam vitae</a>
                          </li>
                          <li>
                            <a href="#">Nulla ligula pulvinar</a>
                          </li>
                          <li>
                            <a href="#">Quisque orci augue</a>
                          </li>
                          <li>
                            <a href="#">Aliquam ac lobortis</a>
                          </li>
                          <li>
                            <a href="#">Laoreet sem sodales</a>
                          </li>
                        </ul>
                      </div>

                      <div class="mega-menu-box">
                        <h4 class="mega-menu-heading"><a href="#">Fusce semper ipsum</a></h4>
                        <ul class="mega-menu-list">
                          <li>
                            <a href="#">Aenean quam vitae</a>
                          </li>
                          <li>
                            <a href="#">Aliquam ac lobortis</a>
                          </li>
                          <li>
                            <a href="#">Laoreet amet ante</a>
                          </li>
                          <li>
                            <a href="#">Nulla ligula pulvinar</a>
                          </li>
                          <li>
                            <a href="#">Quisque orci augue</a>
                          </li>
                        </ul>
                      </div>

                    </div>

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">

                      <div class="mega-menu-box">
                        <h4 class="mega-menu-heading"><a href="#">Gravida mauris congue</a></h4>
                        <ul class="mega-menu-list">
                          <li>
                            <a href="#">Laoreet amet interdum</a>
                          </li>
                          <li>
                            <a href="#">Quisque sapien auguer</a>
                          </li>
                          <li>
                            <a href="#">Nulla ligula pulvinar</a>
                          </li>
                          <li>
                            <a href="#">Aenean condimentum</a>
                          </li>
                          <li>
                            <a href="#">Aliquam naca lobortis</a>
                          </li>
                        </ul>
                      </div>

                      <div class="mega-menu-box">
                        <h4 class="mega-menu-heading"><a href="#">Aliquam ipsum commodo</a></h4>
                        <ul class="mega-menu-list">
                          <li>
                            <a href="#">Fusce adipiscing neque</a>
                          </li>
                          <li>
                            <a href="#">Quis laoreet pretium</a>
                          </li>
                          <li>
                            <a href="#">Aenean pellentesque</a>
                          </li>
                          <li>
                            <a href="#">Aenean sodales conubia</a>
                          </li>
                          <li>
                            <a href="#">Cursus inceptos aliquamer</a>
                          </li>
                        </ul>
                      </div>

                    </div>

                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">

                      <div class="mega-menu-box">
                        <div class="mega-menu-thumbnail">
                          <img src="demo/images/mega-menu-thumbnail-12.png" alt="thumbnail"/>
                        </div>
                      </div>

                    </div>

                  </div>
                </div>

              </li>
            </ul>
          </li>
          <li><a href="#">Gallery</a>
            <ul>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
            </ul>
          </li>
          <li><a href="#">News</a></li>
          <li class="submenu-right"><a href="#">Contact Us</a>
            <ul>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

CSS Code:

/***************************************************
	Default menu
****************************************************/
.bd-header {
  position: relative;
  z-index: 99999;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.428572;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.bd-header *, .bd-header *::before, .bd-header *::after {
  box-sizing: border-box;
}

.bd-header::before, .bd-header::after {
  box-sizing: border-box;
}

.bd-header ul {
  margin-bottom: inherit;
}

.bd-header img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.bd-header a:hover, .bd-header a:focus, .bd-header a:active {
  text-decoration: none;
  outline: none;
}

.bd-header .logo {
  padding: 30px 40px;
  text-align: center;
}

.bd-header .logo img {
  max-width: 100%;
  height: 50px;
}

.bd-header-container {
  position: relative;
}

.bd-menu > ul {
  display: none;
  padding: 0 0 20px;
}

.bd-menu ul li {
  position: relative;
}

.bd-menu ul li > a {
  display: block;
  padding: 14px 15px;
  font-family: "Fira Sans", sans-serif;
  font-size: 15px;
  color: #212121;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}

.bd-menu ul li.current-menu > a,
.bd-menu ul li:hover > a {
  color: #26c6da;
  background-color: #f6f6f6;
}

.bd-menu ul ul li > a {
  padding: 14px 15px 14px 30px;
  font-size: 14px;
  font-style: italic;
  text-transform: inherit;
  background-color: #efefef;
}

.bd-menu ul ul li:hover > a {
  background-color: #efefef;
}

.bd-menu ul ul ul li > a {
  padding: 14px 15px 14px 45px;
}

.bd-menu li > ul {
  display: none;
}

.dropdown-plus {
  position: absolute;
  top: 0;
  right: 0;
  width: 49px;
  height: 49px;
  line-height: 49px;
  cursor: pointer;
}

.dropdown-plus::before, .dropdown-plus::after {
  position: absolute;
  top: 24px;
  right: 18px;
  width: 13px;
  height: 1px;
  content: "";
  background-color: #111;
}

.dropdown-plus::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.dropdown-plus.dropdown-open::after {
  display: none;
}

.header-shadow-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 30px;
  overflow: hidden;
}

.header-shadow-wrapper::after {
  position: relative;
  top: -60px;
  display: block;
  width: 100%;
  height: 60px;
  content: "";
  border-radius: 50%;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
}

/***************************************************
  Burger menu
****************************************************/
.burger-menu {
  position: absolute;
  top: 35px;
  right: 14px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 20px;
  height: 17px;
  cursor: pointer;
  transition: -webkit-transform 330ms ease-out;
  transition: transform 330ms ease-out;
  transition: transform 330ms ease-out, -webkit-transform 330ms ease-out;
}

.burger-menu.menu-open {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.line-menu {
  width: 100%;
  height: 3px;
  background-color: #111;
  border-radius: 2px;
}

.line-menu.line-half {
  width: 50%;
}

.line-menu.first-line {
  -webkit-transform-origin: right;
  transform-origin: right;
  transition: -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57), -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.line-menu.last-line {
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-transform-origin: left;
  transform-origin: left;
  transition: -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57), -webkit-transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.menu-open .line-menu.first-line {
  -webkit-transform: rotate(-90deg) translateX(3px);
  transform: rotate(-90deg) translateX(3px);
}

.menu-open .line-menu.last-line {
  -webkit-transform: rotate(-90deg) translateX(-3px);
  transform: rotate(-90deg) translateX(-3px);
}

/***************************************************
  Dark version menu
****************************************************/
.bd-header.header-dark {
  background-color: #111;
}

.bd-header.header-dark .line-menu,
.bd-header.header-dark .dropdown-plus::before,
.bd-header.header-dark .dropdown-plus::after {
  background-color: #fff;
}

.header-dark .bd-menu ul li > a {
  color: #fff;
}

.header-dark .bd-menu ul li.current-menu > a,
.header-dark .bd-menu ul li:hover > a {
  color: #26c6da;
  background-color: #313131;
}

.header-dark .bd-menu ul ul li > a {
  color: #c1c1c1;
  background-color: #212121;
}

/***************************************************
  Mega menu
****************************************************/
.bd-menu .mega-menu-container {
  padding: 15px 30px 0;
}

.bd-menu .mega-menu-container ul li {
  position: relative;
}

.bd-menu .mega-menu-container ul li a {
  padding: inherit;
  font-style: inherit;
  color: inherit;
  background-color: inherit;
}

.bd-menu .mega-menu-container ul li:hover a {
  background-color: inherit;
}

.bd-menu .mega-menu-container li > ul {
  display: block;
}

.bd-menu .mega-menu > ul .dropdown-plus {
  display: none;
}

.bd-menu .mega-menu-box {
  margin-bottom: 30px;
}

.bd-menu .mega-menu-heading {
  margin-bottom: 12px;
  font-family: "Fira Sans", sans-serif;
  font-size: 15px;
  color: #212121;
  text-transform: uppercase;
}

.bd-menu .mega-menu-heading a {
  color: #212121;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.bd-menu .mega-menu-heading a:hover {
  color: #26c6da;
}

.bd-menu .mega-menu-desc {
  font-family: "Fira Sans", sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.428572;
  color: #818181;
}

.bd-menu ul.mega-menu-list li a {
  padding: 5px 0;
  font-size: 14px;
  font-style: italic;
  color: #818181;
}

.bd-menu ul.mega-menu-list li a:hover {
  color: #26c6da;
}

.bd-menu ul.mega-menu-list ul {
  padding-left: 15px !important;
}

.bd-menu .mega-menu-thumbnail {
  margin-bottom: 20px;
}

.bd-menu .mega-menu-thumbnail img {
  width: 100%;
  height: auto;
}

.bd-menu .mega-menu-thumbnail > a {
  position: relative;
  display: block;
}

.bd-menu .mega-menu-thumbnail > a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease-in-out;
}

.bd-menu .mega-menu-thumbnail:hover > a::before {
  background-color: rgba(0, 0, 0, 0.2);
}

/***************************************************
  Mega menu dark
****************************************************/
.header-dark .bd-menu .mega-menu-container ul li a {
  background-color: inherit;
}

.header-dark .bd-menu .mega-menu-heading a {
  color: #fff;
}

.header-dark .bd-menu .mega-menu-heading a:hover {
  color: #26c6da;
}

/***************************************************
  Menu icons
****************************************************/
.bd-menu .bd-menu-icon {
  margin-right: 5px;
  color: #a1a1a1;
}

.bd-menu ul li > a .bd-menu-icon, .bd-menu .mega-menu-heading a .bd-menu-icon {
  transition: color 0.2s ease-in-out;
}

.bd-menu ul li.current-menu > a .bd-menu-icon, .bd-menu ul li:hover > a .bd-menu-icon, .bd-menu .mega-menu-heading a:hover .bd-menu-icon {
  color: #26c6da !important;
}

.header-dark .bd-menu .bd-menu-icon {
  color: #717171;
}

.bd-menu-overlay .bd-menu-icon {
  position: relative;
  top: -2px;
  margin-right: 10px;
}

.bd-menu-overlay > ul ul li a .bd-menu-icon {
  top: -1px;
  margin-right: 7px;
}

.menu-slide .bd-menu-overlay > ul ul li a .bd-menu-icon {
  margin-right: 5px;
}

.bd-menu-fixed .bd-menu-icon {
  margin-right: 5px;
}

/***************************************************
  Media queries for responsive design
****************************************************/
@media (max-width: 767.98px) {
  .bd-header,
  .bd-header-overlay,
  .body-fixed-sidebar {
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .bd-header,
  .bd-header-overlay,
  .body-fixed-sidebar {
    width: 100%;
  }
}

@media (min-width: 768px) {
  /********** Default menu **********/
  .bd-header .logo {
    float: left;
    padding: 30px 40px 30px 0;
  }
  .bd-menu {
    clear: both;
  }
  .header-shadow-wrapper::after {
    box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.1);
  }
  /********** Mega menu **********/
  .bd-menu .mega-menu-media {
    display: table;
    width: 100%;
  }
  .bd-menu .mega-menu-media-img {
    display: table-cell;
    width: 120px;
    vertical-align: top;
  }
  .bd-menu .mega-menu-media-img .mega-menu-thumbnail {
    margin-bottom: 0;
  }
  .bd-menu .mega-menu-media-img img {
    width: 100%;
    height: auto;
  }
  .bd-menu .mega-menu-media-info {
    display: table-cell;
    padding-left: 20px;
    vertical-align: top;
  }
  /********** Menu icons **********/
  .bd-menu-overlay .bd-menu-icon {
    margin-right: 12px;
  }
  .bd-menu-overlay > ul ul li a .bd-menu-icon {
    margin-right: 8px;
  }
  .menu-slide .bd-menu-overlay .bd-menu-icon {
    margin-right: 10px;
  }
}

@media (min-width: 1200px) {
  /********** Default menu **********/
  .bd-header-container {
    height: 90px;
  }
  .bd-header .logo {
    position: relative;
    top: 50%;
    padding: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .bd-header .logo img {
    width: auto;
    max-width: inherit;
    max-height: 90px;
  }
  .burger-menu {
    display: none;
  }
  .bd-menu {
    float: right;
    clear: inherit;
  }
  .bd-menu > ul {
    display: block !important;
    padding: 0;
    font-size: 0;
  }
  .bd-menu > ul > li {
    display: inline-block;
  }
  .bd-menu > ul > li > a {
    position: relative;
    box-sizing: border-box;
    height: 90px;
    padding: 0 20px;
    line-height: 90px;
    white-space: nowrap;
  }
  .bd-menu > ul > li:last-child > a {
    padding: 0 0 0 20px;
  }
  .bd-menu ul li {
    position: relative;
  }
  .bd-menu ul li.dropdown_menu > a > span {
    display: none;
  }
  .bd-menu ul li.dropdown_menu > a > span::before {
    position: relative;
    top: -3px;
    box-sizing: content-box;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: 8px;
    content: "";
    border-color: #c1c1c1;
    border-style: solid;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .bd-menu ul ul li.dropdown_menu > a > span::before {
    top: 7px;
    right: -10px;
    float: right;
    margin: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .bd-menu ul ul li > a {
    position: relative;
    padding: 9px 35px 7px !important;
    color: #818181;
    background-color: transparent;
  }
  .bd-menu ul ul li > a::before {
    position: absolute;
    top: 17px;
    left: 35px;
    width: 0;
    height: 1px;
    content: "";
    background: #a1a1a1;
    transition: all 0.2s ease-in-out;
  }
  .bd-menu ul ul li:hover > a {
    padding-left: 55px !important;
    color: #818181;
    background-color: transparent;
  }
  .bd-menu ul ul li:hover > a::before {
    width: 10px;
  }
  .bd-menu li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: block !important;
    width: 250px;
    padding: 27px 0;
    visibility: hidden;
    background-color: #fff;
    box-shadow: 0 12px 30px -2px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  .bd-menu li > ul ul {
    top: -27px;
    left: 100%;
  }
  .bd-menu li:hover > ul {
    visibility: visible;
    opacity: 1;
  }
  .bd-menu li.submenu-right > ul {
    right: 0;
    left: inherit;
  }
  .bd-menu li.submenu-right > ul ul {
    left: -100% !important;
  }
  .bd-menu.menu-caret ul li.dropdown_menu > a > span {
    display: inline-block;
  }
  .bd-menu.menu-caret ul ul li.dropdown_menu > a > span {
    display: inline;
  }
  .bd-menu.separate-line > ul > li > a {
    position: relative;
    padding: 0 28px;
  }
  .bd-menu.separate-line > ul > li > a::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 20px;
    content: "";
    background-color: #eee;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .bd-menu.separate-line > ul > li:last-child > a {
    padding: 0 0 0 28px;
  }
  .bd-menu.separate-line > ul > li:last-child > a::before {
    display: none;
  }
  .header-dark .bd-menu ul li.dropdown_menu > a > span::before {
    border-color: #a1a1a1;
  }
  .header-dark .bd-menu ul ul li > a {
    color: #a1a1a1;
    background-color: transparent;
  }
  .header-dark .bd-menu ul ul li:hover > a {
    color: #fff;
    background-color: transparent;
  }
  .header-dark .bd-menu ul ul li:hover > a .bd-menu-icon {
    color: #fff !important;
  }
  .header-dark .bd-menu li > ul {
    background-color: #111;
  }
  .header-dark .bd-menu.separate-line > ul > li > a::before {
    background-color: #333;
  }
  .bd-menu.menu-hover-2 > ul > li:last-child > a, .bd-menu.menu-hover-3 > ul > li:last-child > a, .bd-menu.menu-hover-4 > ul > li:last-child > a, .center-menu-1 .bd-menu > ul > li:last-child > a,
  .center-menu-2 .bd-menu > ul > li:last-child > a {
    padding: 0 20px;
  }
  .bd-menu.menu-hover-2.separate-line > ul > li:last-child > a, .bd-menu.menu-hover-3.separate-line > ul > li:last-child > a, .bd-menu.menu-hover-4.separate-line > ul > li:last-child > a, .center-menu-1 .bd-menu.separate-line > ul > li:last-child > a,
  .center-menu-2 .bd-menu.separate-line > ul > li:last-child > a {
    padding: 0 28px;
  }
  .bd-menu ul li.current-menu > a, .bd-menu ul li:hover > a, .header-dark .bd-menu ul li.current-menu > a, .header-dark .bd-menu ul li:hover > a {
    background-color: inherit;
  }
  .dropdown-plus {
    display: none;
  }
  /********** Header sticky **********/
  .bd-header.sticky {
    position: fixed;
    width: 100%;
    -webkit-animation-name: stickyTransition;
    animation-name: stickyTransition;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .bd-header.sticky .bd-header-container {
    height: 70px;
  }
  .bd-header.sticky .bd-menu > ul > li > a {
    height: 70px;
    line-height: 70px;
  }
  .bd-header.sticky .logo {
    padding: 0 40px 0 0;
  }
  .bd-header.sticky .logo img {
    max-height: 70px;
  }
  @-webkit-keyframes stickyTransition {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes stickyTransition {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  /********** Header transparent **********/
  .bd-header.header-transparent-on, .bd-header.header-opacity-on {
    position: absolute;
    width: 100%;
    background-color: transparent;
  }
  .bd-header.header-opacity-on {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .header-transparent-on .header-shadow-wrapper,
  .header-opacity-on .header-shadow-wrapper {
    display: none;
  }
  .header-transparent-on .bd-menu > ul > li > a,
  .header-opacity-on .bd-menu > ul > li > a {
    color: #f7f7f7;
  }
  .header-transparent-on .bd-menu > ul > li > a .bd-menu-icon,
  .header-opacity-on .bd-menu > ul > li > a .bd-menu-icon {
    color: rgba(255, 255, 255, 0.85);
  }
  .header-transparent-on .bd-menu > ul > li:hover > a, .header-transparent-on .bd-menu > ul > li.current-menu > a,
  .header-opacity-on .bd-menu > ul > li:hover > a,
  .header-opacity-on .bd-menu > ul > li.current-menu > a {
    color: #26c6da;
  }
  .header-transparent-on .bd-menu > ul > li.dropdown_menu > a > span::before,
  .header-opacity-on .bd-menu > ul > li.dropdown_menu > a > span::before {
    border-color: #f7f7f7;
  }
  .header-transparent-on.center-menu-2 .bd-menu {
    border-color: rgba(255, 255, 255, 0.25);
  }
  .header-transparent-on .bd-menu.separate-line > ul > li > a::before {
    background-color: rgba(255, 255, 255, 0.25);
  }
  .header-opacity-on.center-menu-2 .bd-menu {
    border-color: rgba(255, 255, 255, 0.2);
  }
  .header-opacity-on .bd-menu.separate-line > ul > li > a::before {
    background-color: rgba(255, 255, 255, 0.2);
  }
  /********** Hover transitions **********/
  .bd-menu.menu-hover-2 > ul > li.current-menu > a, .bd-menu.menu-hover-2 > ul > li:hover > a {
    color: #212121;
    background-color: #f8f8f8;
  }
  .bd-menu.menu-hover-2 > ul > li.current-menu > a::after, .bd-menu.menu-hover-2 > ul > li:hover > a::after {
    opacity: 1;
  }
  .bd-menu.menu-hover-2 > ul > li > a::after, .bd-menu.menu-hover-3 > ul > li > a::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 3px;
    content: "";
    background-color: #26c6da;
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  .bd-menu.menu-hover-3 > ul > li.current-menu > a, .bd-menu.menu-hover-3 > ul > li:hover > a {
    color: #212121;
  }
  .bd-menu.menu-hover-3 > ul > li.current-menu > a::after, .bd-menu.menu-hover-3 > ul > li:hover > a::after {
    width: 100%;
    opacity: 1;
  }
  .bd-menu.menu-hover-3 > ul > li > a::after {
    left: 50%;
    width: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .bd-menu.menu-hover-4 > ul > li > a > .hover-transition {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .bd-menu.menu-hover-4 > ul > li > a > .hover-transition::after {
    position: relative;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(100% + 2px);
    height: 0;
    content: "";
    background-color: #26c6da;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .bd-menu.menu-hover-4 > ul > li.current-menu > a, .bd-menu.menu-hover-4 > ul > li:hover > a {
    color: #fff;
  }
  .bd-menu.menu-hover-4 > ul > li.current-menu > a > .hover-transition::after, .bd-menu.menu-hover-4 > ul > li:hover > a > .hover-transition::after {
    height: 100%;
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .bd-menu.menu-hover-4 > ul > li.current-menu > a .bd-menu-icon, .bd-menu.menu-hover-4 > ul > li:hover > a .bd-menu-icon {
    color: #fff !important;
  }
  .bd-menu.menu-hover-4 > ul > li > ul {
    transition-delay: 0s;
  }
  .bd-menu.menu-hover-4 > ul > li:hover > ul {
    transition-delay: 0.13s;
  }
  .bd-menu.menu-hover-4 > ul > li.dropdown_menu.current-menu > a > span::before, .bd-menu.menu-hover-4 > ul > li.dropdown_menu:hover > a > span::before {
    border-color: #fff;
  }
  .header-dark .bd-menu.menu-hover-2 > ul > li.current-menu > a, .header-dark .bd-menu.menu-hover-2 > ul > li:hover > a {
    color: #fff;
    background-color: #222;
  }
  .header-dark .bd-menu.menu-hover-3 > ul > li.current-menu > a, .header-dark .bd-menu.menu-hover-3 > ul > li:hover > a {
    color: #fff;
  }
  .header-transparent-on .bd-menu.menu-hover-2 > ul > li.current-menu > a, .header-transparent-on .bd-menu.menu-hover-2 > ul > li:hover > a {
    color: #f7f7f7;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .header-opacity-on .bd-menu.menu-hover-2 > ul > li.current-menu > a, .header-opacity-on .bd-menu.menu-hover-2 > ul > li:hover > a {
    color: #f7f7f7;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .header-transparent-on .bd-menu.menu-hover-3 > ul > li.current-menu > a, .header-transparent-on .bd-menu.menu-hover-3 > ul > li:hover > a, .header-opacity-on .bd-menu.menu-hover-3 > ul > li.current-menu > a, .header-opacity-on .bd-menu.menu-hover-3 > ul > li:hover > a {
    color: #f7f7f7;
  }
  .header-transparent-on .bd-menu.menu-hover-2 > ul > li.current-menu > a .bd-menu-icon, .header-transparent-on .bd-menu.menu-hover-2 > ul > li:hover > a .bd-menu-icon, .header-transparent-on .bd-menu.menu-hover-3 > ul > li.current-menu > a .bd-menu-icon, .header-transparent-on .bd-menu.menu-hover-3 > ul > li:hover > a .bd-menu-icon, .header-opacity-on .bd-menu.menu-hover-2 > ul > li.current-menu > a .bd-menu-icon, .header-opacity-on .bd-menu.menu-hover-2 > ul > li:hover > a .bd-menu-icon, .header-opacity-on .bd-menu.menu-hover-3 > ul > li.current-menu > a .bd-menu-icon, .header-opacity-on .bd-menu.menu-hover-3 > ul > li:hover > a .bd-menu-icon {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  /********** Submenu **********/
  .bd-menu.submenu-top-border li > ul {
    border-top: 3px solid #26c6da;
  }
  .bd-menu.submenu-top-border li > ul ul {
    top: -30px;
  }
  .bd-menu.submenu-top-border.submenu-list-border li > ul ul {
    top: -23px;
  }
  .bd-menu.submenu-list-border li > ul ul {
    top: -20px;
  }
  .bd-menu.submenu-list-border ul ul li > a {
    padding: 15px 35px 14px !important;
  }
  .bd-menu.submenu-list-border ul ul li:first-child > a {
    padding: 8px 35px 14px 35px !important;
  }
  .bd-menu.submenu-list-border ul ul li:last-child > a {
    padding: 15px 35px 8px 35px !important;
  }
  .bd-menu.submenu-list-border ul ul li:last-child::after {
    display: none;
  }
  .bd-menu.submenu-list-border ul ul li::after {
    position: absolute;
    right: 35px;
    bottom: 0;
    left: 35px;
    height: 1px;
    content: "";
    background-color: #eee;
  }
  .bd-menu.submenu-list-border ul ul li:hover > a {
    padding-left: 55px !important;
  }
  .bd-menu.submenu-list-border ul ul li:nth-child(n+2) > a::before {
    top: 24px;
  }
  .header-dark .bd-menu.submenu-list-border ul ul li::after {
    background-color: #333;
  }
  /********** Submenu transitions **********/
  .bd-menu.submenu-flip li > ul {
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.35s ease-in-out;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }
  .bd-menu.submenu-flip li:hover > ul {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .bd-menu.submenu-flip ul {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 200px;
    perspective: 200px;
  }
  .bd-menu.submenu-flip ul li {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 200px;
    perspective: 200px;
  }
  .bd-menu.submenu-scale li > ul {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: all 0.3s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  .bd-menu.submenu-scale li.submenu-right ul {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }
  .bd-menu.submenu-scale li:hover > ul {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  /********** Mega menu **********/
  .bd-mega-menu.mega-menu-fullwidth .bd-header-container {
    position: inherit;
  }
  .bd-mega-menu.mega-menu-fullwidth, .bd-mega-menu .bd-header-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 200px;
    perspective: 200px;
  }
  .bd-menu .mega-menu-container {
    padding: 15px 15px 0;
  }
  .bd-menu .mega-menu-container ul.mega-menu-list li > a::before {
    top: 13px !important;
    left: 0;
    display: block;
  }
  .bd-menu.submenu-flip .mega-menu > ul {
    -webkit-perspective: inherit;
    perspective: inherit;
  }
  .bd-menu.submenu-flip .mega-menu-container li > ul {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .bd-menu.submenu-scale .mega-menu-container li > ul {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .bd-menu ul li.mega-menu {
    position: inherit;
    font-size: initial;
  }
  .bd-menu li.mega-menu > ul {
    width: 100%;
    padding: 25px 20px 15px;
  }
  .bd-menu li.mega-menu:hover .mega-menu-container li > ul {
    visibility: visible;
    opacity: 1;
  }
  .bd-menu li.mega-menu.submenu-right > ul ul {
    left: inherit !important;
  }
  .bd-mega-menu.mega-menu-fullwidth .bd-header-container, .bd-mega-menu .bd-menu.submenu-flip > ul, .bd-mega-menu .bd-menu.submenu-flip ul li.mega-menu {
    -webkit-transform-style: unset;
    transform-style: unset;
    -webkit-perspective: none;
    perspective: none;
  }
  .bd-menu.submenu-scale li.mega-menu ul, .bd-menu.submenu-scale li.mega-menu.submenu-right ul {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
  }
  .bd-menu .mega-menu-container li ul, .bd-menu.submenu-top-border .mega-menu-container li ul, .bd-menu.submenu-list-border .mega-menu-container li ul {
    position: relative;
    top: 0 !important;
    left: inherit;
    width: 100%;
    padding: 0;
    border-top: none;
    box-shadow: inherit;
  }
  .bd-menu .mega-menu-container ul li > a::before, .bd-menu.submenu-list-border .mega-menu-container ul li::after, .bd-menu.menu-caret .mega-menu-container li.dropdown_menu > a > span {
    display: none;
  }
  .bd-menu .mega-menu-container ul li a, .bd-menu .mega-menu-container ul li:hover a, .bd-menu.submenu-list-border .mega-menu-container ul li a, .bd-menu.submenu-list-border .mega-menu-container ul li:hover a, .bd-menu.submenu-list-border .mega-menu-container ul li:first-child a, .bd-menu.submenu-list-border .mega-menu-container ul li:first-child:hover a, .bd-menu.submenu-list-border .mega-menu-container ul li:last-child a, .bd-menu.submenu-list-border .mega-menu-container ul li:last-child:hover a {
    padding: inherit !important;
  }
  .bd-menu .mega-menu-container ul.mega-menu-list li a, .bd-menu .mega-menu-container ul.mega-menu-list li:hover a, .bd-menu.submenu-list-border .mega-menu-container ul.mega-menu-list li a, .bd-menu.submenu-list-border .mega-menu-container ul.mega-menu-list li:hover a {
    padding: 5px 0 !important;
    color: #818181;
  }
  .bd-menu .mega-menu-container ul.mega-menu-list li a:hover, .bd-menu.submenu-list-border .mega-menu-container ul.mega-menu-list li a:hover {
    padding-left: 20px !important;
  }
  .header-dark .bd-menu .mega-menu-container ul.mega-menu-list li a {
    color: #a1a1a1;
  }
  .header-dark .bd-menu .mega-menu-container ul.mega-menu-list li a:hover {
    color: #fff;
  }
}

jQuery Code:

jQuery(document).ready(function() {
	
	"use strict";
	
	/* ========== Sticky on scroll ========== */
	function stickyNav() {

		var scrollTop = $(window).scrollTop(),
			noSticky = $('.no-sticky'),
			viewportSm = $('.viewport-sm'),
			viewportLg = $('.viewport-lg'),
			viewportLgBody = viewportLg.parent('body'),
			viewportLgNosticky = $('.viewport-lg.no-sticky'),
			viewportLgNostickyBody = viewportLgNosticky.parent('body'),
			viewportLgLogo = viewportLg.find('.logo img'),
			viewportLgNostickyLogo = viewportLgNosticky.find('.logo img'),
			headerTransparentLg = $('.viewport-lg.header-transparent'),
			headerTransparentLgNosticky = $('.viewport-lg.header-transparent.no-sticky'),
			headerTransparentLgBody = headerTransparentLg.parent('body'),
			headerOpacityLg = $('.viewport-lg.header-opacity'),
			headerOpacityLgNosticky = $('.viewport-lg.header-opacity.no-sticky'),
			headerOpacityLgBody = headerOpacityLg.parent('body');

		if (scrollTop > bdHeaderHeight) {
			bdHeader.addClass('sticky');
			viewportLgLogo.attr('src', stickyLogoSrc);
			viewportLgNostickyLogo.attr('src', logoSrc);
			headerTransparentLg.removeClass('header-transparent-on');
			headerOpacityLg.removeClass('header-opacity-on');
			headerTransparentLgNosticky.addClass('header-transparent-on');
			headerOpacityLgNosticky.addClass('header-opacity-on');
			viewportLgBody.css("margin-top", bdHeaderHeight);
			viewportLg.css("margin-top", -bdHeaderHeight);
		} else {
			bdHeader.removeClass('sticky');
			viewportLgLogo.attr('src', logoSrc);
			headerTransparentLg.addClass('header-transparent-on');
			headerOpacityLg.addClass('header-opacity-on');
			viewportLgBody.add(viewportLg).css("margin-top", "0");
		}

		noSticky.removeClass('sticky');
		viewportSm.removeClass('sticky');
		
		headerTransparentLg.add(headerTransparentLgBody).add(headerOpacityLg).add(headerOpacityLgBody).add(viewportLgNostickyBody).add(viewportLgNosticky).css("margin-top", "0");

		var logoCenterWidth = $('.logoCenter .logo img').width(),
			menuCenterOneWidth = $('.center-menu-1 .bd-menu').width(),
			menuCenterOneListMenu = $('.center-menu-1 .bd-menu > ul'),
			menuCenterOneListWidth = menuCenterOneWidth - logoCenterWidth;

		if ($(window).width() < 1200) {
			menuCenterOneListMenu.outerWidth( menuCenterOneWidth );
		} else {
			menuCenterOneListMenu.outerWidth( menuCenterOneListWidth / 2 );
		}

		$('.logoCenter').width(logoCenterWidth);
		
	}

	/* ========== Menu overlay transition ========== */
	function overlayMenuTransition() {
		var overlayMenuFirst = $('.bd-menu-overlay > ul > li:first-child'),
			overlayMenuList = $('.bd-menu-overlay > ul > li');

		overlayMenuFirst.attr('data-delay', '0');

		overlayMenuList.each(function(){
			var $this = $(this),
				overlayMenuNext = $this.next('li'),
				menuDataDelay = $this.attr('data-delay'),
				menuDataDelayNext = parseInt(menuDataDelay) + parseInt('100');

			overlayMenuNext.attr('data-delay', menuDataDelayNext);

			$this.delay(menuDataDelay).queue(function(next) {
				$(this).addClass("menuSlideIn");
				next();
			});
		});
	}

	/* ========== Horizontal navigation menu ========== */
	if ($('.bd-header').length) {

		var bdHeader = $('.bd-header'),
			bdHeaderHeight = bdHeader.height(),
			logo = bdHeader.find('.logo'),
			logoImg = logo.find('img'),
			logoSrc = logoImg.attr('src'),
			logoClone = logo.clone(),
			mobileLogoSrc = logo.data('mobile-logo'),
			stickyLogoSrc = logo.data('sticky-logo'),
			burgerMenu = bdHeader.find('.burger-menu'),
			bdMenuListWrapper = $('.bd-menu > ul'),
			bdMenuListDropdown = $('.bd-menu ul li:has(ul)'),
			headerShadow = $('.bd-header.header-shadow'),
			headerTransparent = $('.bd-header.header-transparent'),
			headerOpacity = $('.bd-header.header-opacity'),
			megaMenuFullwidthContainer = $('.mega-menu-fullwidth .mega-menu-container');

		/* ========== Center menu 1 ========== */
		$('.center-menu-1 .bd-menu > ul:first-child').after('<div class="logoCenter"></div>');
		$('.logoCenter').html(logoClone);

		/* ========== Mega menu fullwidth wrap container ========== */
		megaMenuFullwidthContainer.each(function(){
			$(this).children().wrapAll('<div class="mega-menu-fullwidth-container"></div>');
		});

		/* ========== Window resize ========== */
		$(window).on("resize", function() {

			var megaMenuContainer = $('.mega-menu-fullwidth-container');

			if ($(window).width() < 1200) {

				logoImg.attr('src', mobileLogoSrc);
				bdHeader.removeClass('viewport-lg');
				bdHeader.addClass('viewport-sm');
				headerTransparent.removeClass('header-transparent-on');
				headerOpacity.removeClass('header-opacity-on');
				megaMenuContainer.removeClass('container');

			} else {

				logoImg.attr('src', logoSrc);
				bdHeader.removeClass('viewport-sm');
				bdHeader.addClass('viewport-lg');
				headerTransparent.addClass('header-transparent-on');
				headerOpacity.addClass('header-opacity-on');
				megaMenuContainer.addClass('container');

			}

			stickyNav();

		}).resize();

		/* ========== Dropdown Menu Toggle ========== */
		burgerMenu.on("click", function(){
			$(this).toggleClass('menu-open');
			bdMenuListWrapper.slideToggle(300);
		});
		
		bdMenuListDropdown.each(function(){
			$(this).append( '<span class="dropdown-plus"></span>' );
			$(this).addClass('dropdown_menu');
		});
		
		$('.dropdown-plus').on("click", function(){
			$(this).prev('ul').slideToggle(300);
			$(this).toggleClass('dropdown-open');
		});
		
		$('.dropdown_menu a').append('<span></span>');

		/* ========== Added header shadow ========== */
		headerShadow.append('<div class="header-shadow-wrapper"></div>');

		/* ========== Sticky on scroll ========== */
		$(window).on("scroll", function() {
			stickyNav();
		}).scroll();

		/* ========== Menu hover transition ========== */
		var listMenuHover4 = $('.bd-menu.menu-hover-4 > ul > li > a');
		listMenuHover4.append('<div class="hover-transition"></div>');

	}

	/* ========== Overlay navigation menu ========== */
	if ($('.bd-header-overlay').length) {

		var bdHeaderOverlay = $('.bd-header-overlay'),
			bdMenuOverlay = $('.bd-menu-overlay'),
			burgerMenuOverlay = bdHeaderOverlay.find('.burger-menu'),
			lineMenuOverlay = bdHeaderOverlay.find('.line-menu'),
			menuOverlayLogo = bdHeaderOverlay.find('.logo'),
			overlayLogoClone = menuOverlayLogo.clone(),
			menuWrapperLogoSrc = menuOverlayLogo.data('overlay-logo'),
			menuOverlayListDropdown = $('.bd-menu-overlay > ul > li:has(ul)'),
			menuOverlayLink = $('.bd-menu-overlay > ul > li > a'),
			menuSlide = $('.bd-header-overlay.menu-slide'),
			menuSlideSubmenuLink = menuSlide.find('.bd-menu-overlay > ul ul a'),
			menuSlideSubmenuDropdown = menuSlide.find('.bd-menu-overlay > ul > li > ul li:has(ul)'),
			menuSocialMedia = bdMenuOverlay.next('.menu-social-media'),
			submenuVerticalListItem = $('.submenu-vertical > ul > li > ul li:has(ul)'),
			submenuVerticalLink = $('.submenu-vertical > ul > li > ul a');

		lineMenuOverlay.wrapAll('<span></span>');
		menuOverlayLink.wrap('<div class="menu-overlay-link"></div>');
		submenuVerticalLink.wrap('<div class="menu-overlay-link"></div>');
		menuSlideSubmenuLink.wrap('<div class="menu-overlay-link"></div>');

		/* ========== Submenu Toggle ========== */
		menuOverlayListDropdown.each(function(){
			var menuOverlayDropdownLink = $(this).children('.menu-overlay-link');
			menuOverlayDropdownLink.prepend( '<span class="overlay-dropdown-plus"></span>' );
			$(this).addClass('overlay_dropdown_menu');
		});

		submenuVerticalListItem.each(function(){
			var submenuVerticalDropdownLink = $(this).children('.menu-overlay-link');
			submenuVerticalDropdownLink.prepend( '<span class="overlay-dropdown-plus"></span>' );
			$(this).addClass('overlay_dropdown_menu');
		});

		menuSlideSubmenuDropdown.each(function(){
			var submenuVerticalDropdownLink = $(this).children('.menu-overlay-link');
			submenuVerticalDropdownLink.prepend( '<span class="overlay-dropdown-plus"></span>' );
			$(this).addClass('overlay_dropdown_menu');
		});

		$('.overlay_dropdown_menu > ul').addClass('overlay-submenu-close');
		
		$('.overlay-dropdown-plus').on("click", function(){
			var $thisParent = $(this).parent('.menu-overlay-link');
			$thisParent.next('ul').slideToggle(300).toggleClass('overlay-submenu-close');
			$(this).toggleClass('overlay-dropdown-open');
		});

		bdMenuOverlay.add(menuSocialMedia).wrapAll('<div class="nav-menu-wrapper"></div>');

		var overlayNavMenuWrapper = $('.nav-menu-wrapper');

		overlayNavMenuWrapper.prepend(overlayLogoClone);
		overlayNavMenuWrapper.find('.logo img').attr('src', menuWrapperLogoSrc);

		var menuOverlayHover = $('.bd-menu-overlay > ul > .overlay_dropdown_menu > ul');

		menuOverlayHover.each(function(){
			$(this).on("mouseenter", function () {
				$(this).parents("li").addClass("overlay-menu-hover");
			});
			$(this).on("mouseleave", function () {
				$(this).parents("li").removeClass("overlay-menu-hover");
			});
		});

		/* ========== Menu overlay open ========== */
		burgerMenuOverlay.on("click", function(){

			var overlayMenuList = $('.bd-menu-overlay > ul > li');

			$(this).toggleClass('menu-open');
			overlayNavMenuWrapper.toggleClass('overlay-menu-open');
			overlayMenuList.removeClass("menuSlideIn");
			
			if ($(this).hasClass("menu-open")) {
				overlayMenuTransition();
				overlayMenuList.removeClass("menuSlideOut").addClass("menuFade");
			}

			if (!$(this).hasClass("menu-open")) {
				overlayMenuList.addClass("menuSlideOut").removeClass("menuFade");
			}

		});

		/* ========== Menu slide settings ========== */
		var menuSlideNavWrapper = menuSlide.find('.nav-menu-wrapper'),
			menuSlideNavLogo = menuSlideNavWrapper.find('.logo');

		if (bdHeaderOverlay.hasClass('menu-slide')){
			bdHeaderOverlay.removeClass('overlay-center-menu');
		}

		menuSlideNavLogo.remove();
		menuSlideNavWrapper.after('<div class="slidemenu-bg-overlay"></div>');

		$('.slidemenu-bg-overlay').on("click", function(){
			menuSlideNavWrapper.removeClass('overlay-menu-open');
			burgerMenuOverlay.removeClass('menu-open');
		});

	}

	/* ========== Fixed sidebar menu ========== */
	if ($('.bd-fixed-sidebar').length) {
		var bdFixedSidebar = $('.bd-fixed-sidebar'),
			bdMenuFixed = $('.bd-menu-fixed'),
			bdSideContent = $('.bd-side-content'),
			logoFixedSidebar = bdFixedSidebar.find('.logo'),
			logoClone = logoFixedSidebar.clone(),
			burgerMenuFixedSidebar = bdFixedSidebar.find('.burger-menu'),
			burgerMenuDetach = burgerMenuFixedSidebar.detach(),
			bdFixedDropdown = bdMenuFixed.find('li:has(ul)');

		bdFixedSidebar.parent('body').addClass('body-fixed-sidebar');
		bdFixedSidebar.after('<div class="fixedsidebar-bg-overlay"></div>').after(burgerMenuDetach);
		bdSideContent.prepend(logoClone);

		$('.bd-fixed-sidebar .logo, .bd-menu-fixed').wrapAll('<div class="fixed-menu-wrap"></div>');

		var burgerMenuMove = bdFixedSidebar.next('.burger-menu'),
			fixedSidebarlineMenu = burgerMenuMove.find('.line-menu');

		fixedSidebarlineMenu.wrapAll('<span></span>');

		/* ========== Side menu open on mobile ========== */
		burgerMenuMove.on("click", function(){
			$(this).toggleClass('menu-open');
			bdFixedSidebar.toggleClass('fixed-sidebar-open');
		});

		$('.fixedsidebar-bg-overlay').on("click", function(){
			bdFixedSidebar.removeClass('fixed-sidebar-open');
			burgerMenuMove.removeClass('menu-open');
		});

		/* ========== Submenu collapse ========== */
		bdFixedDropdown.each(function(){
			$(this).append( '<span class="overlay-dropdown-plus"></span>' );
		});

		$('.overlay-dropdown-plus').on("click", function(){
			$(this).prev('ul').slideToggle(300).toggleClass('submenu-collapse');
			$(this).toggleClass('overlay-dropdown-open');
		});
	}

	/* ========== Menu icon color ========== */
	$('.bd-menu-icon').css('color', function () {
		var iconColorAttr = $(this).data('fa-color');
		return iconColorAttr;
	});

});
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply