Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>


  <header>
    <nav style="background-color:skyblue">
      <!--add class="nav-collapse" to the above per instructions on responsive-nav.com-->

      <a href="#" title="home"><img src="img/logo.png" alt="logo" class="ttlogo"></a>

      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a>
          <ul>
            <li><a href="#">Menu1111111</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </li>
        <li><a href="#">Services</a>
          <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </li>
        <li><a href="#">Projects</a>
          <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
          </ul>
        </li>
        <li><a href="#">contact</a></li>
      </ul>
    </nav>
  </header>

  <script>
    var nav = responsiveNav(".nav-collapse");
  </script>
</body>
              
            
!

CSS

              
                @charset "utf-8";
/* CSS Document */

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
  letter-spacing: 1px;
}

a {
  text-decoration: none;
  color: inherit;
}

a nav:hover {
  text-decoration: none;
}
/* NAVIGATION */

@media only screen and (min-width: 960px) {
  nav {
    text-align: justify;
    /*requried for justify-vcenter fix*/
    
    height: 5em;
    /*requried for justify-vcenter fix*/
    
    background: white;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(255, 255, 255, 0.95);
    color: #505050;
    text-transform: uppercase;
  }
  nav,
  .slogan {
    padding: 0 4%;
  }
  /*positions the nav bar and slogan together*/
  
  .ttlogo {
    width: 220px;
  }
  /*defines the width and margins for the TT Logo and the TT Slogan*/
  
  nav::after {
    content: '';
    display: inline-block;
    width: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a,
  nav > a::before,
  nav > ul,
  nav > a img {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a {
    height: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a::before {
    content: '';
    height: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > ul > li a {
    display: block;
    padding: 6px 0;
  }
  nav ul li:hover > a,
  nav ul li.active {
    text-decoration: none;
    color: black;
  }
  nav ul {
    list-style: none;
  }
  nav > ul > li {
    display: inline-block;
    /*requried for justify-vcenter fix*/
    
    padding: 0.6em;
    white-space: nowrap;
    /*requried for justify-vcenter fix*/
    
    position: relative;
    /*required for dropdown menu*/
    
    z-index: 10;
  }
  nav > ul > li:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .3s ease, background-color .5s ease;
  }
  /* bottom border before hover*/
  
  nav > ul > li:hover:after,
  nav > ul > li.active:after {
    width: 100%;
    background-color: green;
  }
  nav > ul > li:last-child {
    padding-right: 0;
  }
  nav > ul > li:hover {}
  /*NAVIGATION - DROPDOWN*/
  
  nav > ul:after {
    content: "";
    clear: both;
    display: block;
  }
  /*clearfix*/
  
  nav ul ul {
    /*display:none; removed due to CSS transition property*/
    
    position: absolute;
    top: 100%;
    /*sets the top edge of the element above/below top edge of nearest ancestor*/
    
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    background: white;
    /*css transition properies below*/
    
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: 300ms ease;
  }
  nav ul li:hover > ul {
    /*css transition properies below*/
    
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  /*NAVIGATION - DROPDOWN - LIST ITEMS*/
  
  nav ul ul li {
    float: none;
    text-align: center;
    background: none;
    transition: 400ms ease;
  }
  nav ul ul li:hover {
    background: lightgrey;
  }
  nav ul ul li a {
    display: block;
    padding: 10px;
  }
}
/*end media query for desktop nav menu*/

@media only screen and (min-width: 481px) and (max-width: 959px) {
  nav {
    text-align: justify;
    /*requried for justify-vcenter fix*/
    
    height: 4em;
    /*requried for justify-vcenter fix*/
    
    background: white;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(255, 255, 255, 0.95);
    color: #505050;
    text-transform: uppercase;
  }
  nav > a,
  .slogan {
    padding: 0 4%;
  }
  /*positions the nav bar and slogan together*/
  
  .ttlogo {
    width: 180px;
  }
  /*defines the width and margins for the TT Logo and the TT Slogan*/
  
  nav::after {
    content: '';
    display: inline-block;
    width: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a,
  nav > a::before,
  nav > ul,
  nav > a img {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a {
    height: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a::before {
    content: '';
    height: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > ul {
    display: block;
    text-align: center;
    background: black;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(0, 0, 0, 0.4);
    color: #E0E0E0;
  }
  nav > ul > li a {
    display: block;
    padding: 6px 0;
    font-size: 80%;
  }
  nav ul li:hover > a,
  nav ul li.active {
    text-decoration: none;
    color: white;
  }
  nav ul {
    list-style: none;
  }
  nav > ul > li {
    display: inline-block;
    /*requried for justify-vcenter fix*/
    
    padding: 0.6em;
    white-space: nowrap;
    /*requried for justify-vcenter fix*/
    
    position: relative;
    /*required for dropdown menu*/
    
    z-index: 10;
  }
  nav > ul > li:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .3s ease, background-color .5s ease;
  }
  /* bottom border before hover*/
  
  nav > ul > li:hover:after,
  nav > ul > li.active:after {
    width: 100%;
    background-color: green;
  }
  nav > ul > li:last-child {
    padding-right: 0;
  }
  nav > ul > li:hover {}
  /*NAVIGATION - DROPDOWN*/
  
  nav > ul:after {
    content: "";
    clear: both;
    display: block;
  }
  /*clearfix*/
  /*can i remove this?*/
  /*
    nav ul ul li {
        float:left
    }*/
  
  nav ul ul {
    /*display:none; removed due to CSS transition property*/
    
    position: absolute;
    top: 100%;
    /*sets the top edge of the element above/below top edge of nearest ancestor*/
    
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    background: black;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(0, 0, 0, 0.4);
    /*css transition properies below*/
    
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: 300ms ease;
  }
  nav ul li:hover > ul {
    /*display:block; removed due to CSS transition property*/
    /*css transition properies below*/
    
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  /*NAVIGATION - DROPDOWN - LIST ITEMS*/
  
  nav ul ul li {
    float: none;
    /*border-top: 1px solid black;*/
    /*adds borders*/
    
    text-align: center;
    background: none;
    transition: 400ms ease;
  }
  nav ul ul li:hover {
    background: darkgray;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(0, 0, 0, 0.3);
  }
  nav ul ul li a {
    display: block;
    padding: 10px;
  }
}
/*end media query for tablet nav menu*/

@media only screen and (max-width: 480px) {
  nav {
    text-align: justify;
    /*requried for justify-vcenter fix*/
    
    height: 4em;
    /*requried for justify-vcenter fix*/
    
    background: white;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(255, 255, 255, 0.95);
    color: #505050;
    text-transform: uppercase;
  }
  nav > a,
  .slogan {
    padding: 0 4%;
  }
  /*positions the nav bar and slogan together*/
  
  .ttlogo {
    width: 180px;
  }
  /*defines the width and margins for the TT Logo and the TT Slogan*/
  
  nav::after {
    content: '';
    display: inline-block;
    width: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a,
  nav > a::before,
  nav > ul,
  nav > a img {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a {
    height: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > a::before {
    content: '';
    height: 100%;
  }
  /*requried for justify-vcenter fix*/
  
  nav > ul {
    display: block;
    text-align: center;
    background: black;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(0, 0, 0, 0.5);
    color: #E0E0E0;
    list-style: none;
  }
  nav ul li a {
    display: block;
    padding: .6em 0;
  }
  nav ul li {
    transition: 300ms ease;
    background: none;
  }
  nav ul li:hover {
    background: darkgray;
    /*incase the website doesn't accept opacity values*/
    
    background: rgba(0, 0, 0, 0.1);
  }
  /*NAVIGATION - DROPDOWN*/
  
  nav ul ul li {
    display: none;
  }
  nav ul li:hover ul li {
    display: block;
  }
}
/*end media query for mobile nav menu*/
/* HEADER */

.header_intro {
  position: absolute;
  z-index: auto;
  width: 100%;
  bottom: 240px;
  text-align: center;
  color: white;
}
/*INTRO*/

.slogan {
  position: absolute;
  z-index: 1;
  margin-top: 4em;
}

.slogan .ttlogo {
  border-bottom: solid white .25em;
  color: white;
  padding-bottom: 1em;
}
/* HEADER - HOME PAGE */
/* HEADER - HOME PAGE - BANNER */

.full_width.slick_banner {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: -1;
  top: 0;
}
/*BANNER CONTAINER*/

.full_width.slick_banner img {
  width: 100%;
  height: 720px;
  position: relative;
  z-index: auto;
}
/*BANNER IMAGE*/

.full_width.slick_banner p {
  position: absolute;
  z-index: auto;
  width: inherit;
  text-align: center;
  color: white;
  bottom: 40px;
}
/*PROJECT DESCRIPTIONS*/
/* RESPONSIVE NAV PLUGIN */
/*! responsive-nav.js 1.0.32 by @viljamis */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}
              
            
!

JS

              
                /*! responsive-nav.js 1.0.32
 * https://github.com/viljamis/responsive-nav.js
 * http://responsive-nav.com
 *
 * Copyright (c) 2014 @viljamis
 * Available under the MIT license
 */

(function (document, window, index) {

  "use strict";

  var responsiveNav = function (el, options) {

    var computed = !!window.getComputedStyle;
    
    // getComputedStyle polyfill
    if (!computed) {
      window.getComputedStyle = function(el) {
        this.el = el;
        this.getPropertyValue = function(prop) {
          var re = /(\-([a-z]){1})/g;
          if (prop === "float") {
            prop = "styleFloat";
          }
          if (re.test(prop)) {
            prop = prop.replace(re, function () {
              return arguments[2].toUpperCase();
            });
          }
          return el.currentStyle[prop] ? el.currentStyle[prop] : null;
        };
        return this;
      };
    }
    /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */
    // fn arg can be an object or a function, thanks to handleEvent
    // read more at: https://www.thecssninja.com/javascript/handleevent
    var addEvent = function (el, evt, fn, bubble) {
        if ("addEventListener" in el) {
          // BBOS6 doesn't support handleEvent, catch and polyfill
          try {
            el.addEventListener(evt, fn, bubble);
          } catch (e) {
            if (typeof fn === "object" && fn.handleEvent) {
              el.addEventListener(evt, function (e) {
                // Bind fn as this and set first arg as event object
                fn.handleEvent.call(fn, e);
              }, bubble);
            } else {
              throw e;
            }
          }
        } else if ("attachEvent" in el) {
          // check if the callback is an object and contains handleEvent
          if (typeof fn === "object" && fn.handleEvent) {
            el.attachEvent("on" + evt, function () {
              // Bind fn as this
              fn.handleEvent.call(fn);
            });
          } else {
            el.attachEvent("on" + evt, fn);
          }
        }
      },
    
      removeEvent = function (el, evt, fn, bubble) {
        if ("removeEventListener" in el) {
          try {
            el.removeEventListener(evt, fn, bubble);
          } catch (e) {
            if (typeof fn === "object" && fn.handleEvent) {
              el.removeEventListener(evt, function (e) {
                fn.handleEvent.call(fn, e);
              }, bubble);
            } else {
              throw e;
            }
          }
        } else if ("detachEvent" in el) {
          if (typeof fn === "object" && fn.handleEvent) {
            el.detachEvent("on" + evt, function () {
              fn.handleEvent.call(fn);
            });
          } else {
            el.detachEvent("on" + evt, fn);
          }
        }
      },
    
      getChildren = function (e) {
        if (e.children.length < 1) {
          throw new Error("The Nav container has no containing elements");
        }
        // Store all children in array
        var children = [];
        // Loop through children and store in array if child != TextNode
        for (var i = 0; i < e.children.length; i++) {
          if (e.children[i].nodeType === 1) {
            children.push(e.children[i]);
          }
        }
        return children;
      },
    
      setAttributes = function (el, attrs) {
        for (var key in attrs) {
          el.setAttribute(key, attrs[key]);
        }
      },
    
      addClass = function (el, cls) {
        if (el.className.indexOf(cls) !== 0) {
          el.className += " " + cls;
          el.className = el.className.replace(/(^\s*)|(\s*$)/g,"");
        }
      },
    
      removeClass = function (el, cls) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
      },
    
      // forEach method that passes back the stuff we need
      forEach = function (array, callback, scope) {
        for (var i = 0; i < array.length; i++) {
          callback.call(scope, i, array[i]);
        }
      };

    var nav,
      opts,
      navToggle,
      styleElement = document.createElement("style"),
      htmlEl = document.documentElement,
      hasAnimFinished,
      isMobile,
      navOpen;

    var ResponsiveNav = function (el, options) {
        var i;

        // Default options
        this.options = {
          animate: true,                    // Boolean: Use CSS3 transitions, true or false
          transition: 284,                  // Integer: Speed of the transition, in milliseconds
          label: "Menu",                    // String: Label for the navigation toggle
          insert: "before",                 // String: Insert the toggle before or after the navigation
          customToggle: "",                 // Selector: Specify the ID of a custom toggle
          closeOnNavClick: false,           // Boolean: Close the navigation when one of the links are clicked
          openPos: "relative",              // String: Position of the opened nav, relative or static
          navClass: "nav-collapse",         // String: Default CSS class. If changed, you need to edit the CSS too!
          navActiveClass: "js-nav-active",  // String: Class that is added to <html> element when nav is active
          jsClass: "js",                    // String: 'JS enabled' class which is added to <html> element
          init: function(){},               // Function: Init callback
          open: function(){},               // Function: Open callback
          close: function(){}               // Function: Close callback
        };

        // User defined options
        for (i in options) {
          this.options[i] = options[i];
        }

        // Adds "js" class for <html>
        addClass(htmlEl, this.options.jsClass);

        // Wrapper
        this.wrapperEl = el.replace("#", "");

        // Try selecting ID first
        if (document.getElementById(this.wrapperEl)) {
          this.wrapper = document.getElementById(this.wrapperEl);

        // If element with an ID doesn't exist, use querySelector
        } else if (document.querySelector(this.wrapperEl)) {
          this.wrapper = document.querySelector(this.wrapperEl);

        // If element doesn't exists, stop here.
        } else {
          throw new Error("The nav element you are trying to select doesn't exist");
        }

        // Inner wrapper
        this.wrapper.inner = getChildren(this.wrapper);

        // For minification
        opts = this.options;
        nav = this.wrapper;

        // Init
        this._init(this);
      };

    ResponsiveNav.prototype = {

      // Public methods
      destroy: function () {
        this._removeStyles();
        removeClass(nav, "closed");
        removeClass(nav, "opened");
        removeClass(nav, opts.navClass);
        removeClass(nav, opts.navClass + "-" + this.index);
        removeClass(htmlEl, opts.navActiveClass);
        nav.removeAttribute("style");
        nav.removeAttribute("aria-hidden");

        removeEvent(window, "resize", this, false);
        removeEvent(document.body, "touchmove", this, false);
        removeEvent(navToggle, "touchstart", this, false);
        removeEvent(navToggle, "touchend", this, false);
        removeEvent(navToggle, "mouseup", this, false);
        removeEvent(navToggle, "keyup", this, false);
        removeEvent(navToggle, "click", this, false);

        if (!opts.customToggle) {
          navToggle.parentNode.removeChild(navToggle);
        } else {
          navToggle.removeAttribute("aria-hidden");
        }
      },

      toggle: function () {
        if (hasAnimFinished === true) {
          if (!navOpen) {
            this.open();
          } else {
            this.close();
          }
        }
      },

      open: function () {
        if (!navOpen) {
          removeClass(nav, "closed");
          addClass(nav, "opened");
          addClass(htmlEl, opts.navActiveClass);
          addClass(navToggle, "active");
          nav.style.position = opts.openPos;
          setAttributes(nav, {"aria-hidden": "false"});
          navOpen = true;
          opts.open();
        }
      },

      close: function () {
        if (navOpen) {
          addClass(nav, "closed");
          removeClass(nav, "opened");
          removeClass(htmlEl, opts.navActiveClass);
          removeClass(navToggle, "active");
          setAttributes(nav, {"aria-hidden": "true"});

          if (opts.animate) {
            hasAnimFinished = false;
            setTimeout(function () {
              nav.style.position = "absolute";
              hasAnimFinished = true;
            }, opts.transition + 10);
          } else {
            nav.style.position = "absolute";
          }

          navOpen = false;
          opts.close();
        }
      },

      resize: function () {
        if (window.getComputedStyle(navToggle, null).getPropertyValue("display") !== "none") {

          isMobile = true;
          setAttributes(navToggle, {"aria-hidden": "false"});

          // If the navigation is hidden
          if (nav.className.match(/(^|\s)closed(\s|$)/)) {
            setAttributes(nav, {"aria-hidden": "true"});
            nav.style.position = "absolute";
          }

          this._createStyles();
          this._calcHeight();
        } else {

          isMobile = false;
          setAttributes(navToggle, {"aria-hidden": "true"});
          setAttributes(nav, {"aria-hidden": "false"});
          nav.style.position = opts.openPos;
          this._removeStyles();
        }
      },

      handleEvent: function (e) {
        var evt = e || window.event;

        switch (evt.type) {
        case "touchstart":
          this._onTouchStart(evt);
          break;
        case "touchmove":
          this._onTouchMove(evt);
          break;
        case "touchend":
        case "mouseup":
          this._onTouchEnd(evt);
          break;
        case "click":
          this._preventDefault(evt);
          break;
        case "keyup":
          this._onKeyUp(evt);
          break;
        case "resize":
          this.resize(evt);
          break;
        }
      },

      // Private methods
      _init: function () {
        this.index = index++;

        addClass(nav, opts.navClass);
        addClass(nav, opts.navClass + "-" + this.index);
        addClass(nav, "closed");
        hasAnimFinished = true;
        navOpen = false;

        this._closeOnNavClick();
        this._createToggle();
        this._transitions();
        this.resize();

        // IE8 hack
        var self = this;
        setTimeout(function () {
          self.resize();
        }, 20);

        addEvent(window, "resize", this, false);
        addEvent(document.body, "touchmove", this, false);
        addEvent(navToggle, "touchstart", this, false);
        addEvent(navToggle, "touchend", this, false);
        addEvent(navToggle, "mouseup", this, false);
        addEvent(navToggle, "keyup", this, false);
        addEvent(navToggle, "click", this, false);

        // Init callback
        opts.init();
      },

      _createStyles: function () {
        if (!styleElement.parentNode) {
          styleElement.type = "text/css";
          document.getElementsByTagName("head")[0].appendChild(styleElement);
        }
      },

      _removeStyles: function () {
        if (styleElement.parentNode) {
          styleElement.parentNode.removeChild(styleElement);
        }
      },

      _createToggle: function () {
        if (!opts.customToggle) {
          var toggle = document.createElement("a");
          toggle.innerHTML = opts.label;
          setAttributes(toggle, {
            "href": "#",
            "class": "nav-toggle"
          });

          if (opts.insert === "after") {
            nav.parentNode.insertBefore(toggle, nav.nextSibling);
          } else {
            nav.parentNode.insertBefore(toggle, nav);
          }

          navToggle = toggle;
        } else {
          var toggleEl = opts.customToggle.replace("#", "");

          if (document.getElementById(toggleEl)) {
            navToggle = document.getElementById(toggleEl);
          } else if (document.querySelector(toggleEl)) {
            navToggle = document.querySelector(toggleEl);
          } else {
            throw new Error("The custom nav toggle you are trying to select doesn't exist");
          }
        }
      },

      _closeOnNavClick: function () {
        if (opts.closeOnNavClick && "querySelectorAll" in document) {
          var links = nav.querySelectorAll("a"),
            self = this;
          forEach(links, function (i, el) {
            addEvent(links[i], "click", function () {
              if (isMobile) {
                self.toggle();
              }
            }, false);
          });
        }
      },

      _preventDefault: function(e) {
        if (e.preventDefault) {
          e.preventDefault();
          e.stopPropagation();
        } else {
          e.returnValue = false;
        }
      },

      _onTouchStart: function (e) {
        e.stopPropagation();
        if (opts.insert === "after") {
          addClass(document.body, "disable-pointer-events");
        }
        this.startX = e.touches[0].clientX;
        this.startY = e.touches[0].clientY;
        this.touchHasMoved = false;
        removeEvent(navToggle, "mouseup", this, false);
      },

      _onTouchMove: function (e) {
        if (Math.abs(e.touches[0].clientX - this.startX) > 10 ||
        Math.abs(e.touches[0].clientY - this.startY) > 10) {
          this.touchHasMoved = true;
        }
      },

      _onTouchEnd: function (e) {
        this._preventDefault(e);
        if (!this.touchHasMoved) {
          if (e.type === "touchend") {
            this.toggle();
            if (opts.insert === "after") {
              setTimeout(function () {
                removeClass(document.body, "disable-pointer-events");
              }, opts.transition + 300);
            }
            return;
          } else {
            var evt = e || window.event;
            // If it isn't a right click
            if (!(evt.which === 3 || evt.button === 2)) {
              this.toggle();
            }
          }
        }
      },

      _onKeyUp: function (e) {
        var evt = e || window.event;
        if (evt.keyCode === 13) {
          this.toggle();
        }
      },

      _transitions: function () {
        if (opts.animate) {
          var objStyle = nav.style,
            transition = "max-height " + opts.transition + "ms";

          objStyle.WebkitTransition = transition;
          objStyle.MozTransition = transition;
          objStyle.OTransition = transition;
          objStyle.transition = transition;
        }
      },

      _calcHeight: function () {
        var savedHeight = 0;
        for (var i = 0; i < nav.inner.length; i++) {
          savedHeight += nav.inner[i].offsetHeight;
        }
        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important}";

        if (styleElement.styleSheet) {
          styleElement.styleSheet.cssText = innerStyles;
        } else {
          styleElement.innerHTML = innerStyles;
        }

        innerStyles = "";
      }

    };

    return new ResponsiveNav(el, options);

  };

  if (typeof module !== "undefined" && module.exports) {
    module.exports = responsiveNav;
  }
  else {
    window.responsiveNav = responsiveNav;
  }
}(document, window, 0));
              
            
!
999px

Console