website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

Multilevel Responsive Navigation

Multilevel Responsive Navigation

  • 401
  • 18-Nov-2021

FILE STRUCTURE


INDEX.HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"

    />

    <title>Multilevel Responsive Navigation</title>

    <link

      href="https://fonts.googleapis.com/css?family=Exo+2:300,400" rel="stylesheet" />

    <link

      rel="stylesheet" type="text/css" media="all" href="css/atechnav.css"

    />

   

  </head>

 

  <body>

   

    <div class="atechnav">

      <ul>

        <li><a href="">Home</a></li>

        <li><a href="">About</a></li>

        <li><a href="">Contact</a></li>

        <li><a href="">Services</a></li>

        <li>

            <a href="">Dropdown Right</a>

            <ul>

              <li>

                <a href="#">Item 1</a>

                <ul>

                  <li>

                    <a href="#">Item</a>

                    <ul>

                      <li>

                        <a href="#">Item</a>

                        <ul>

                          <li><a href="#">Item</a></li>

                          <li><a href="#">Item</a></li>

                          <li><a href="#">Item</a></li>

                        </ul>

                      </li>

                      <li><a href="#">Item</a></li>

                      <li><a href="#">Item</a></li>

                      <li><a href="#">Item</a></li>

                    </ul>

                  </li>

                </ul>

              </li>

             

              <li>

                <a href="#">Item 4</a>

                <ul>

                    <li><a href="#">Item</a></li>

                    <li><a href="#">Item</a></li>

                    <li><a href="#">Item</a></li>

                </ul>

              </li>

            </ul>

          </li>

 

        <li class="mega" data-column="5"><a href="">Mega Dropdown</a>

            <ul>

                <li><a href="#">Item 1</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                      <li><a href="#">Item</a></li>

                      <li><a href="#">Item</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 2</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                      <li><a href="#">Item</a></li>

                      <li><a href="#">Item</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 3</a>

                    <ul>

                        <li><a href="#">Item</a>

                            <ul>

                                <li><li><a href="#">Item</a></li></li>

                                <li><li><a href="#">Item</a></li></li>

                               

                            </ul>

                        </li>

                       

                    </ul>

                </li>

                <li><a href="#">Item 4</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 5</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 6</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 7</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                       

                    </ul>

                </li>

                <li><a href="#">Item 8</a>

                    <ul>

                        <li><a href="#">Item</a>

                            <ul>

                                <li><li><a href="#">Item</a></li></li>

                                <li><li><a href="#">Item</a></li></li>

                           

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="#">Item 9</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 10</a>

                    <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                    </ul>

                </li>

            </ul>

        </li>

       

       

        <li class="drop-left">

          <a href="">Drop Left</a>

          <ul>

            <li>

              <a href="#">Item</a>

              <ul>

                <li>

                  <a href="#">Item</a>

                  <ul>

                    <li>

                      <a href="#">Item</a>

                      <ul>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                        <li><a href="#">Item</a></li>

                      </ul>

                    </li>

                    <li><a href="#">Item</a></li>

                    <li><a href="#">Item</a></li>

                    <li><a href="#">Item</a></li>

                  </ul>

                </li>

                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>

                <li><a href="#">Item</a></li>

               

              </ul>

            </li>

           

          </ul>

        </li>

      </ul>

    </div>

    <!-- .atechnav -->

 

    <!-- required -->

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/atechnav.js"></script>

    <script type="text/javascript">

      jQuery(document).ready(function ($) {

        jQuery(".atechnav").atechnav({

          theme: "light",

          breakpoint: 960,

          position: "right",

          phoneBtn: "9999999999",

          locationBtn: "https://www.google.com/maps",

        });

      });

    </script>

    <script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>

  </body>

</html>

 

 

ATECHNAV.CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

* {

  margin: 0;

  padding: 0;

  }

  body {

  height: 3200px;

  font-size: 16px;

  font-family: 'Montserrat', sans-serif;

  background: #efefef;

  color: #555;

  }

  .container {

  max-width: 1200px;

  margin: 0 auto;

  }

  @media only screen and (max-width: 1000px) {

  .atechnav > ul > li > a {

    padding: 20px 23px;

  }

  }

/* all nav */

.atechnav {

  position: relative;

  width: 100%;

  z-index: 9900;

  line-height: normal;

}

.atechnav a {

  color: rgb(24, 24, 24);

}

.atechnav ul {

  margin: 0;

  padding: 0;

  text-align: center;

}

.atechnav li {

  list-style: none;

  display: block;

  margin: 0;

  padding: 0;

  position: relative;

  line-height: normal;

  vertical-align: middle;

}

.atechnav li a {

  padding: 15px;

  display: block;

  text-decoration: none;

  color: rgb(24, 24, 24);

  font-size: inherit;

  font-family: inherit;

  box-sizing: border-box;

  -webkit-transition: all 0.3s ease-out;

  -moz-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

}

 

/* main level */

.atechnav > ul > li {

  display: inline-block;

}

.atechnav > ul > li > a {

  padding: 20px 40px;

}

 

/* first level dd */

.atechnav ul ul {

  top: auto;

  width: 220px;

  position: absolute;

  z-index: 9900;

  text-align: left;

  display: none;

  background: #ddd;

}

.atechnav li li {

  display: block;

}

 

/* second level dd */

.atechnav ul ul ul {

  top: 0; /* dd animtion - change to auto to remove */

  left: 220px;

}

.atechnav > ul > li:hover > ul > li:hover > ul {

  opacity: 1;

  visibility: visible;

  top: 0;

}

 

/* .drop-left */

.atechnav > ul > li.drop-left > ul {

  right: 0;

}

.atechnav li.drop-left ul ul {

  left: auto;

  right: 220px;

}

 

/* light theme */

.atechnav.light {

  background: rgba(255, 255, 255, 1);

}

.atechnav.light a {

  color: #000;

}

.atechnav.light ul ul {

  background: rgba(255, 255, 255, 1);

}

.atechnav.light li a {

  color: #000;

}

 

/* dark theme */

.atechnav.dark {

  background: rgba(0, 0, 0, 1);

}

.atechnav.dark a {

  color: #fff;

}

.atechnav.dark ul ul {

  background: rgba(0, 0, 0, 1);

}

.atechnav.dark li a {

  color: #fff;

}

/* sticky nav */

.atechnav.fixed {

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 9999;

}

 

/* only used when 'scrollbarFix' is set to true in the js. This fixes horizontal scrollbar caused by the dd menus that are very long.*/

body.atechnav-noscroll-x {

  overflow-x: hidden;

}

 

/* general styling */

.atechnav li.has-sub > a:after {

  content: "";

  margin-left: 10px;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid #000;

  display: inline-block;

}

.atechnav li li.has-sub > a:after {

  margin-left: 10px;

  float: right;

  border-top: 6px solid transparent;

  border-bottom: 6px solid transparent;

  border-left: 6px solid #fff;

  position: relative;

  top: 4px;

}

.atechnav li.drop-left li.has-sub > a:after {

  float: left;

  margin-right: 10px;

  border-left: 0;

  border-top: 6px solid transparent;

  border-bottom: 6px solid transparent;

  border-right: 6px solid #fff;

}

.atechnav.hide-arrows li.has-sub > a:after,

.atechnav.hide-arrows li li.has-sub > a:after,

.atechnav.hide-arrows li.drop-left li.has-sub > a:after {

  display: none;

}

.atechnav .menu-toggle,

.atechnav .close-menu,

.atechnav .call-btn-mobile,

.atechnav .location-btn-mobile {

  display: none;

  text-transform: uppercase;

  text-decoration: none;

}

.atechnav .dd-toggle {

  display: none;

  position: absolute;

  top: 0;

  right: 0;

  padding: 0;

  width: 48px;

  height: 48px;

  text-align: center;

  z-index: 9999;

  border: 0;

}

.atechnav.desktop li.has-sub a {

  padding-right: 5px;

}

.atechnav.desktop.hide-arrows li.has-sub a {

  padding-right: 15px;

}

.atechnav.mobile > ul > li > a.dd-toggle {

  padding: 0;

}

.atechnav li.call-btn-mobile,

.atechnav li.location-btn-mobile {

  display: none;

}

 

/* svg icons */

.atechnav svg {

  fill: currentColor;

  width: 1em;

  height: 1em;

  position: relative;

  top: 2px;

}

/* svg icons */

 

.atechnav a.dd-toggle .icon-plus {

  box-sizing: border-box;

  transition: transform 0.3s;

  width: 12px;

  height: 100%;

  position: relative;

  vertical-align: middle;

  display: inline-block;

  color: rgb(34, 34, 34);

}

.atechnav a.dd-toggle .icon-plus:before {

  content: "";

  display: block;

  width: 12px;

  height: 0px;

  border-bottom: solid 3px rgb(34, 34, 34);

  position: absolute;

  top: 50%;

  transform: rotate(90deg);

  transition: width 0.3s;

}

.atechnav a.dd-toggle .icon-plus:after {

  content: "";

  display: block;

  width: 12px;

  height: 0px;

  top: 50%;

  border-bottom: solid 3px rgb(31, 31, 31);

  position: absolute;

}

.atechnav li.open > a.dd-toggle .icon-plus {

  -webkit-transform: rotate(135deg);

  -ms-transform: rotate(135deg);

  -o-transform: rotate(135deg);

  transform: rotate(135deg);

}

.atechnav.light a.dd-toggle .icon-plus:before {

  border-color: #000;

}

.atechnav.light a.dd-toggle .icon-plus:after {

  border-color: #000;

}

.atechnav.dark a.dd-toggle .icon-plus:before {

  border-color: #fff;

}

.atechnav.dark a.dd-toggle .icon-plus:after {

  border-color: #fff;

}

 

.atechnav .icon-close {

  box-sizing: border-box;

  width: 12px;

  height: 12px;

  position: relative;

  display: inline-block;

}

.atechnav .icon-close:before {

  content: "";

  display: block;

  width: 12px;

  height: 0px;

  border-bottom: solid 3px rgb(24, 24, 24);

  position: absolute;

  top: 50%;

  transform: rotate(45deg);

}

.atechnav .icon-close:after {

  content: "";

  display: block;

  width: 12px;

  height: 0px;

  top: 50%;

  border-bottom: solid 3px rgb(24, 24, 24);

  position: absolute;

  transform: rotate(-45deg);

}

.atechnav.light .icon-close:before {

  border-color: #000;

}

.atechnav.light .icon-close:after {

  border-color: #000;

}

.atechnav.dark .icon-close:before {

  border-color: #fff;

}

.atechnav.dark .icon-close:after {

  border-color: #fff;

}

 

/* mobile nav */

.atechnav .menu-toggle,

.atechnav .call-btn-mobile,

.atechnav .location-btn-mobile,

.atechnav .close-menu {

  padding: 15px;

  box-sizing: border-box;

}

.atechnav .menu-toggle span.bars {

  display: inline-block;

  margin-right: 7px;

  position: relative;

  top: 3px;

}

.atechnav .menu-toggle span.bars span {

  display: block;

  width: 15px;

  height: 2px;

  border-radius: 6px;

  background: rgb(24, 24, 24);

  margin: 0 0 3px;

}

.atechnav .full {

  width: 100%;

}

.atechnav .half {

  width: 50%;

}

.atechnav .third {

  width: 33%;

  text-align: center;

}

.atechnav .location-btn-mobile.third {

  text-align: center;

}

.atechnav .location-btn-mobile.half {

  text-align: right;

}

.atechnav.light .third,

.atechnav.light .half {

  border-left: 1px solid rgba(0, 0, 0, 0.15);

}

.atechnav.light.left .third,

.atechnav.light.left .half {

  border-bottom: 1px solid rgba(0, 0, 0, 0.15);

}

.atechnav.light.right .third,

.atechnav.light.right .half {

  border-bottom: 1px solid rgba(0, 0, 0, 0.15);

}

.atechnav.light .third:first-child,

.atechnav.light .half:first-child {

  border-left: 0;

}

.atechnav.dark .third,

.atechnav.dark .half {

  border-left: 1px solid rgba(255, 255, 255, 0.15);

}

.atechnav.dark.left .third,

.atechnav.dark.left .half {

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}

.atechnav.dark.right .third,

.atechnav.dark.right .half {

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}

.atechnav.light.left .menu-toggle,

.atechnav.light.right .menu-toggle {

  border-bottom: 0;

}

.atechnav.dark.left .menu-toggle,

.atechnav.dark.right .menu-toggle {

  border-bottom: 0;

}

.atechnav.dark .third:first-child,

.atechnav.dark .half:first-child {

  border-left: 0;

}

.atechnav.light .menu-toggle span.bars span {

  background: #000;

}

.atechnav.dark .menu-toggle span.bars span {

  background: #fff;

}

.atechnav.mobile {

  position: static;

}

.atechnav.mobile.fixed {

  position: static;

}

.atechnav.mobile ul {

  position: relative;

  display: none;

}

.atechnav.mobile.active {

  padding-bottom: 0;

}

.atechnav.mobile.active > ul {

  display: block;

}

.atechnav.mobile ul {

  text-align: left;

}

.atechnav.mobile > ul > li {

  display: block;

}

.atechnav.mobile > ul > li > a {

  padding: 15px;

}

.atechnav.mobile ul {

  background: rgba(221, 221, 221, 1);

}

.atechnav.mobile ul ul {

  position: relative;

  opacity: 1;

  visibility: visible;

  width: auto;

  display: none;

  -moz-transition: none;

  -webkit-transition: none;

  -o-transition: color 0 ease-in;

  transition: none;

}

.atechnav.mobile ul ul ul {

  left: auto;

  top: auto;

}

.atechnav.mobile li.drop-left ul ul {

  right: auto;

}

.atechnav.mobile li a {

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}

.atechnav.mobile > ul {

  border-top: 1px solid rgba(255, 255, 255, 0.15);

}

.atechnav.mobile.light li a {

  border-bottom: 1px solid rgba(0, 0, 0, 0.15);

}

.atechnav.mobile.light > ul {

  border-top: 1px solid rgba(0, 0, 0, 0.15);

}

.atechnav.mobile li a.dd-toggle {

  border: 0;

}

.atechnav.mobile.light li a.dd-toggle {

  border: 0;

}

.atechnav.mobile .menu-toggle,

.atechnav.mobile .dd-toggle,

.atechnav.mobile .close-menu,

.atechnav.mobile .call-btn-mobile,

.atechnav.mobile .location-btn-mobile {

  display: inline-block;

}

.atechnav.mobile li.call-btn-mobile {

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  box-sizing: border-box;

}

.atechnav.mobile li.call-btn-mobile,

.atechnav.mobile li.location-btn-mobile {

  display: inline-block;

  width: 50%;

  text-transform: uppercase;

  text-align: center;

}

.atechnav.mobile li.call-btn-mobile.full,

.atechnav.mobile li.location-btn-mobile.full {

  display: block;

  width: 100%;

  text-transform: uppercase;

  border-right: 0;

  text-align: left;

}

.atechnav.mobile.light ul {

  background: rgba(255, 255, 255, 1);

}

.atechnav.mobile.dark ul {

  background: rgba(0, 0, 0, 1);

}

.atechnav.mobile.dark ul ul {

  background: rgba(255, 255, 255, 0.08);

}

.atechnav.mobile.light li.call-btn-mobile {

  border-right: 1px solid rgba(0, 0, 0, 0.1);

}

.atechnav.mobile.top {

  position: absolute;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 9999;

}

.atechnav.mobile li.has-sub > a:after,

.atechnav.mobile li li.has-sub > a:after,

.atechnav.mobile li.drop-left li.has-sub > a:after {

  display: none;

}

 

/* left and right positions */

.atechnav.mobile.right > ul,

.atechnav.mobile.left > ul {

  position: fixed;

  top: 0;

  bottom: 0;

  width: 100%;

  max-width: 280px;

  overflow-x: hidden;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

.atechnav.mobile.right > ul {

  right: 0;

}

.atechnav.mobile.right .close-menu,

.atechnav.mobile.left .close-menu {

  display: inline-block;

  text-align: right;

}

.atechnav.mobile.left > ul {

  left: 0;

}

.atechnav.mobile.right .location-btn-mobile.half,

.atechnav.mobile.right .call-btn-mobile.half,

.atechnav.mobile.right .close-menu.half {

  text-align: center;

}

.atechnav.mobile.right .location-btn-mobile.third,

.atechnav.mobile.right .call-btn-mobile.third,

.atechnav.mobile.right .close-menu.third {

  text-align: center;

}

.atechnav.mobile.left .location-btn-mobile.half,

.atechnav.mobile.left .call-btn-mobile.half,

.atechnav.mobile.left .close-menu.half {

  text-align: center;

}

.atechnav.mobile.left .location-btn-mobile.third,

.atechnav.mobile.left .call-btn-mobile.third,

.atechnav.mobile.left .close-menu.third {

  text-align: center;

}

.atechnav.mobile.left .menu-toggle.half,

.atechnav.mobile.left .menu-toggle.third,

.atechnav.mobile.right .menu-toggle.half,

.atechnav.mobile.right .menu-toggle.third {

  text-align: left;

}

.atechnav.mobile.left .close-menu.third span,

.atechnav.mobile.right .close-menu.third span {

  display: none;

}

/* left and right positions */

 

/* mega dd */

.atechnav.desktop li.mega ul ul {

  background: none;

}

.atechnav.desktop li.mega li {

  display: inline-block;

  vertical-align: top;

  margin-left: -4px;

}

.atechnav.desktop li.mega li li {

  display: block;

  position: relative;

  left: 4px;

}

.atechnav.desktop li.mega ul ul {

  width: auto;

}

.atechnav.desktop > ul > li.mega {

  position: inherit;

}

.atechnav.desktop > ul > li.mega > ul {

  width: 100%;

}

.atechnav.desktop > ul > li.mega > ul li.has-sub ul {

  display: block;

  position: relative;

  left: auto;

}

.atechnav.desktop > ul > li.mega > ul > li {

  padding-bottom: 15px;

  box-sizing: border-box;

}

.atechnav.desktop li.mega li li a {

  padding: 5px 15px;

}

.atechnav.desktop li.mega li.has-sub a:after {

  display: none;

}

.atechnav.desktop > ul > li.mega > ul > li > a {

  color: #202020;

}

/* mega dd */

 

/* Fallback for slow javascript load */

@media only screen and (max-width: 768px) {

  .atechnav {

    overflow: hidden;

    display: block;

  }

  .atechnav ul {

    position: relative;

    display: none;

  }

}

 

/* mobile nav */

@media only screen and (max-width: 420px) {

  .atechnav.mobile .call-btn-mobile.third span,

  .atechnav.mobile .location-btn-mobile.third span {

    display: none;

  }

}

 

 

atechnav,js


(function($) {
    $.fn.atechnav = function(options, width, breakpoint) {

        var $nav, $width, $breakpoint, $parentItems;
        nav = $(this);
        width = $(window).width();

        // default settings
        var settings = $.extend( {
            theme: 'plain', // adds default color to nav. (light, dark)
            breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly
            menuLabel: 'Menu', // label for the mobile nav
            sticky: false, // makes nav sticky on scroll (desktop only)
            position: 'static', // 'static', 'top', 'left', 'right' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page
            openingSpeed: 250, // how fast the dropdown should open in milliseconds
            closingDelay: 250, // controls how long the dropdowns stay open for in milliseconds
            showArrows: true, // shows dropdown arrows next to the items that have sub menus
            phoneBtn: '', // adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
            phoneLabel: 'Call Us', // label for the phone button
            locationBtn: '', // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
            locationLabel: 'Location', // label for the location button
            closeBtn: false, // adds a close button to the end of nav
            closeLabel: 'Close', // label for the close button
            mobileMode: false,
            scrollbarFix: false // fixes horizontal scrollbar issue on very long navs
        }, options );

        return this.each( function() {

            // defines black or white themes
            if (settings.theme == 'light' || settings.theme == 'dark') {
                nav.addClass(settings.theme);
            }

            if (settings.breakpoint) {
                breakpoint = settings.breakpoint;
            }

            if (settings.menuLabel) {
                menuLabel = settings.menuLabel;
            } else {
                menuLabel = '';
            }

            if (settings.phoneLabel) {
                phoneLabel = settings.phoneLabel;
            } else {
                phoneLabel = '';
            }

            if (settings.locationLabel) {
                locationLabel = settings.locationLabel;
            } else {
                locationLabel = '';
            }

            if (settings.closeLabel) {
                closeLabel = settings.closeLabel;
            } else {
                closeLabel = '';
            }

            // css classes for main menu mobile buttons
            if( settings.phoneBtn && settings.locationBtn ) {
                var cssClass = 'third';
            } else if( settings.phoneBtn || settings.locationBtn ) {
                var cssClass = 'half';
            } else {
                var cssClass = 'full';
            }

            // adds the toggle button to open and close nav
            if ( settings.position == 'right' || settings.position == 'left' ) {
                nav.prepend('<a href="#" class="menu-toggle"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + '</a>');
            } else {
                nav.prepend('<a href="#" class="menu-toggle ' + cssClass + '"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + '</a>');
            }

            // adds a click-to-call link
            if (settings.phoneBtn && !(settings.position == 'right' || settings.position == 'left')) {
                var btn = '<a href="tel:'+ settings.phoneBtn +'" class="call-btn-mobile ' + cssClass + '"><svg id="icon-phone"></svg> <span>' + phoneLabel + '</span></a>';
                nav.find('a.menu-toggle').after(btn);
            }

            // adds a location page link to the beginning of nav
            if (settings.locationBtn && !(settings.position == 'right' || settings.position == 'left')) {
                var btn = '<a href="'+ settings.locationBtn +'" class="location-btn-mobile ' + cssClass + '" target="_blank"><svg id="icon-location"></svg> <span>' + locationLabel + '</span></a>';
                nav.find('a.menu-toggle').after(btn);
            }

            // Makes nav sticky on scroll
            if (settings.sticky) {
                navPos = nav.offset().top;
                if(width >= breakpoint) {
                    $(window).on('scroll', function() {
                 if ($(window).scrollTop() > navPos) {
                     nav.addClass('fixed');
                 }
                 else {
                     nav.removeClass('fixed');
                 }
                });
                }
            }

            if (settings.position == 'top') {
                nav.addClass('top');
            }

            if (settings.position == 'left' || settings.position == 'right') {
                var closeBtn = '<a href="#" class="close-menu ' + cssClass + '"><span class="icon-close"></span>' + closeLabel + '</a>';
                var phoneBtn = '<a href="tel:'+ settings.phoneBtn +'" class="call-btn-mobile ' + cssClass + '"><svg id="icon-phone"></svg></a>';
                var locationBtn = '<a href="'+ settings.locationBtn +'" class="location-btn-mobile ' + cssClass + '" target="_blank"><svg id="icon-location"></svg></i></a>';

                nav.find('ul:first').prepend(closeBtn);

                if (settings.locationBtn) {
                    nav.find('ul:first').prepend(locationBtn);
                }
                if (settings.phoneBtn) {
                    nav.find('ul:first').prepend(phoneBtn);
                }
            }

            if (settings.position == 'right') {
                nav.addClass('right');
            }

            if (settings.position == 'left') {
                nav.addClass('left');
            }

            if (!settings.showArrows) {
                nav.addClass('hide-arrows');
            }

            if (settings.closeBtn && !(settings.position == 'right' || settings.position == 'left')) {
                // adds a link to end of nav to close it
                nav.find('ul:first').append('<li><a href="#" class="close-menu"><span class="icon-close"></span> ' + closeLabel + '</a></li>');
            }

            if (settings.scrollbarFix) {
                $('body').addClass('atechnav-noscroll-x');
            }

            // svg graphics
            // phone icon
            var phoneIcon = document.getElementById('icon-phone'); // Gets phone icon element
            if( phoneIcon ) {
                phoneIcon.setAttribute('viewBox','0 0 480 480');
                var newPhoneIcon = document.createElementNS("http://www.w3.org/2000/svg", 'path'); // Create a path in SVG's namespace
                newPhoneIcon.setAttribute('d','M340.273,275.083l-53.755-53.761c-10.707-10.664-28.438-10.34-39.518,0.744l-27.082,27.076 c-1.711-0.943-3.482-1.928-5.344-2.973c-17.102-9.476-40.509-22.464-65.14-47.113c-24.704-24.701-37.704-48.144-47.209-65.257     c-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149l8.936-8.947c11.097-11.1,11.403-28.826,0.721-39.521L73.39,8.194 C62.708-2.486,44.969-2.162,33.872,8.938l-15.15,15.237l0.414,0.411c-5.08,6.482-9.325,13.958-12.484,22.02     C3.74,54.28,1.927,61.603,1.098,68.941C-6,127.785,20.89,181.564,93.866,254.541c100.875,100.868,182.167,93.248,185.674,92.876 c7.638-0.913,14.958-2.738,22.397-5.627c7.992-3.122,15.463-7.361,21.941-12.43l0.331,0.294l15.348-15.029     C350.631,303.527,350.95,285.795,340.273,275.083z'); // Sets path's data
                phoneIcon.appendChild(newPhoneIcon);
            }

            // location icon
            var locationIcon = document.getElementById('icon-location'); //Gets phone icon element
            if( locationIcon ) {
                locationIcon.setAttribute('viewBox','0 0 480 480');
                var newLocationIcon = document.createElementNS("http://www.w3.org/2000/svg", 'path'); // Create a path in SVG's namespace
                newLocationIcon.setAttribute('d','M322.621,42.825C294.073,14.272,259.619,0,219.268,0c-40.353,0-74.803,14.275-103.353,42.825 c-28.549,28.549-42.825,63-42.825,103.353c0,20.749,3.14,37.782,9.419,51.106l104.21,220.986   c2.856,6.276,7.283,11.225,13.278,14.838c5.996,3.617,12.419,5.428,19.273,5.428c6.852,0,13.278-1.811,19.273-5.428 c5.996-3.613,10.513-8.562,13.559-14.838l103.918-220.986c6.282-13.324,9.424-30.358,9.424-51.106 C365.449,105.825,351.176,71.378,322.621,42.825z M270.942,197.855c-14.273,14.272-31.497,21.411-51.674,21.411 s-37.401-7.139-51.678-21.411c-14.275-14.277-21.414-31.501-21.414-51.678c0-20.175,7.139-37.402,21.414-51.675 c14.277-14.275,31.504-21.414,51.678-21.414c20.177,0,37.401,7.139,51.674,21.414c14.274,14.272,21.413,31.5,21.413,51.675 C292.355,166.352,285.217,183.575,270.942,197.855z'); // Sets path's data
                locationIcon.appendChild(newLocationIcon);
            }

            // opens and closes menu
            $('.menu-toggle, .atechnav-open').on('click', function(e) {
                e.preventDefault();

                // if nav position is left or right, uses fadeToggle instead of slideToggle
                if (settings.position == 'left' || settings.position == 'right') {
                    nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed);
                    nav.toggleClass('active');

                    if(nav.hasClass('active') && nav.hasClass('mobile')) {
                        // closes the menu when clicked outside of it
                        $(document).on('click', function(event) {
                            // ensures menu hides only on mobile nav
                            if(nav.hasClass('mobile')) {
                                if (!$(event.target).closest(nav).length) {
                                    nav.find('ul:first').stop(true, true).fadeOut(settings.openingSpeed);
                                    nav.removeClass('active');
                                }
                            }
                        });
                    }

                } else {
                    // static position - normal open and close animation
                    nav.find('ul:first').stop(true, true).slideToggle(settings.openingSpeed);
                    nav.toggleClass('active');
                }
            });

            // activates the close button
            $('.close-menu, .atechnav-close').on('click', function() {

                nav.removeClass('active');

                if (settings.position == 'left' || settings.position == 'right') {
                    nav.find('ul:first').stop(true, true).fadeToggle(settings.openingSpeed);
                } else {
                    nav.find('ul:first').stop(true, true).slideUp(settings.openingSpeed).toggleClass('active');
                }
            });


            // adds toggle button to li items that have children
            nav.find('li a').each(function() {
                if ($(this).next().length > 0) {
                    $(this).parent('li').addClass('has-sub').append('<a class="dd-toggle" href="#"><span class="icon-plus"></span></a>');
                }
            });

            // expands the dropdown menu on each click
            nav.find('li .dd-toggle').on('click', function(e) {
                e.preventDefault();
                $(this).parent('li').children('ul').stop(true, true).slideToggle(settings.openingSpeed);
                $(this).parent('li').toggleClass('open');
            });

            var resetTriggers = function() {
                nav.find('li').off('mouseenter');
                nav.find('li').off('mouseleave');
            }

            // defines top level items
            parentItems = nav.find('> ul > li');

            var setTriggers = function() {
                $(parentItems).each(function() {
                    if( $(this).hasClass('mega') ) {
                        // mega dropdown
                        $(this).on('mouseenter', function(){
                            $(this).find('ul').first().stop(true, true).slideDown(settings.openingSpeed);
                        });
                        $(this).on('mouseleave', function(){
                            $(this).find('ul').first().stop(true, true).slideUp(settings.openingSpeed);
                        });
                    } else {
                        // normal dropdown
                        // first-level
                        $(this).on('mouseenter', function(){
                            $(this).children('ul').stop(true, true).slideDown(settings.openingSpeed);
                        });
                        $(this).on('mouseleave', function(){
                            $(this).children('ul').stop(true, true).delay(settings.closingDelay).slideUp(settings.openingSpeed);
                        });

                        // second level and below
                        $(this).find('li.has-sub').on('mouseenter', function(){
                            $(this).children('ul').stop(true, true).slideDown(settings.openingSpeed);
                        });
                        $(this).find('li.has-sub').on('mouseleave', function(){
                            $(this).children('ul').stop(true, true).delay(settings.closingDelay).slideUp(settings.openingSpeed);
                        });
                    }
                });
            }

            windowCheck();

            // check browser width in real-time
            function windowCheck() {
                var browserWidth = window.innerWidth;

                if(browserWidth <= breakpoint || settings.mobileMode) {
                    // mobile/tablet nav

                    resetTriggers();
                    nav.addClass('mobile');
                    nav.removeClass('desktop');

                    // closes the menu when resizing window back to desktop
                    if( !nav.hasClass('active') && nav.find('ul:first').is(':visible') ) {
                        nav.find('ul:first').hide();
                    }

                    // resets all the styles back to normal that are added on the desktop for the mega dropdown
                    nav.find('li.mega').each(function() {
                        $(this).find('ul').first().removeAttr('style');
                        $(this).find('ul').first().children().removeAttr('style');
                    });

                } else {
                    // desktop nav
                    nav.addClass('desktop');
                    nav.removeClass('mobile');

                    if(nav.hasClass('active')) {
                        nav.removeClass('active');
                    }

                    // ensures atechnav is visible after resizing window
                    if( !nav.hasClass('active') && nav.find('ul:first').is(':hidden') ) {
                        nav.find('ul:first').show();
                    }

                    // hides items that were open on mobile
                    $('li.open').removeClass('open').find('ul:visible').hide();

                    resetTriggers();
                    setTriggers();

                    // mega dropdown
                    navWidth = 0;

                    $(parentItems).each(function() {
                    // calculates the nav width based on the sum of all top-level items
                    navWidth += $(this)[0].getBoundingClientRect().width;
                        navWidth = Math.round(navWidth);

                        if($(this).hasClass('mega')) {
                            // left aligns mega dropdown with nav
                            $(this).find('ul').first().css({'left': 0, 'right': 0, 'margin': '0px auto'});

                            // gets the data-column attribute and divides the columns equally
                            numCols = $(this).attr('data-columns');
                            if(numCols==2) {
                                $(this).find('li.has-sub').width('50%');
                            } else if (numCols==3) {
                                $(this).find('ul').first().children().width('33.33%');
                            } else if (numCols==4) {
                                $(this).find('ul').first().children().width('25%');
                            } else if (numCols==5) {
                                $(this).find('ul').first().children().width('20%');
                            } else if (numCols==6) {
                                $(this).find('ul').first().children().width('16.66%');
                            } else if (numCols==7) {
                                $(this).find('ul').first().children().width('14.28%');
                            } else if (numCols==8) {
                                $(this).find('ul').first().children().width('12.5%');
                            } else {
                                // defaults to 4 column
                                $(this).find('ul').first().children().width('25%');
                            }
                        }

                    });

                    // defines the mega dropdown width to be the same as nav width
                    if(parentItems.hasClass('mega')) {
                        nav.find('li.mega > ul').css({'max-width'