Mobile nav menu not responding to touch (hamburger)

[Quinn11]

Hi there,

My new site is having issues with the mobile menu where it will not react once pressed on a mobile device or even on a PC in mobile debug mode. I have cleared my cache and switched themes to no avail. If anyone has ideas on what I can do please let me know. I have attached necessary information below, let me know if there is anything else you need.

Theme: CleanLines - Online Store

Main.less:

/* 
Nav and Menus
--------------------------------------------------------------------------------*/

#navigation {
  padding-bottom: 40px;
  width: 960px;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;

  ul {
    display: inline-block;
    white-space: normal;
  }
}
#navigation a{
  display:inline-block;
  padding:10px 14px;
}

#navigation:before,
#navigation:after {
    background-color: @line;
    content: "";
    display: inline-block;
    height: 1px;
    bottom: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

body.full-width-off #navigation:before,
body.full-width-off #navigation:after {
  display: none;
}

#navigation:before {
    right: 29px;
    margin-left: -50%;
}

#navigation:after {
    left: 29px;
    margin-right: -50%;
}

#navigation li {
  display: inline-block;
}

#navigation li:hover,
#navigation li#active {
  background-color: @navBackgroundHover;
  color: @navHover;
}

#navigation a {
  color: inherit;
}

.wsite-menu{
  list-style-type:none;
  margin-left:25px;
}

#wsite-menus .wsite-menu li a {
  background-color: @navBackgroundHover;
  border: none;
  color: @navHover;
}

#wsite-menus .wsite-menu li a:hover {
  background-color: @subnavBackgroundHover;
  color: @subnavHover;
}

.wsite-menu-arrow {
  font-size: 0;
  margin-left: 10px;
}

.wsite-menu-arrow:before {
  display: inline-block;
  content: '\203A';
  vertical-align: bottom;
  font-size: 20px;
}
/* Mobile - Nav
--------------------------------------------------------------------------------*/

#header{
  background: @background;
}

#navigation ul {
    list-style-type:none;
}

#navigation ul li {
    display:inline-block;
}

.nav-trigger {
    display:none;
    text-align:center;
}

.nav-trigger span.mobile {
    display:block;
    background-color: @navHover;
    height:3px;
    width:24px;
    position:relative;
    margin:0 auto 5px;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow:    inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
    box-shadow:         inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
}

.nav-trigger span.mobile:last-child{
  margin-bottom:0;
}

.navmobile-wrapper{
  display: none;
}

.navmobile-wrapper .nav-trigger {
  padding: 0;
}
.navmobile-wrapper label{
  padding: 10px;
}


/* Mobile - Layouts 1024px
--------------------------------------------------------------------------------*/

@media (max-width:1024px){

/*  General */

  #navigation,
  #banner,
  .container,
  #footer-content{
    width:auto;
    min-width: 100%;
  }
  #wrapper{
    box-sizing:border-box;
  }

  #wrapper {
    position:relative;
    left:0%;
    -webkit-transition: left 0.3s ease-in-out !important;
        -moz-transition: left 0.3s ease-in-out !important;
        -o-transition: left 0.3s ease-in-out !important;
        -ms-transition: left 0.3s ease-in-out !important;
        transition: left 0.3s ease-in-out !important;
  }

/* Mobile - Layouts 992px
--------------------------------------------------------------------------------*/

@media (max-width:992px){

/*  General */

  body.full-width-off .body-wrap {
    margin: 0 auto;
  }

  h2,
  #wsite-search-header h2{
    font-size:1.4em;
    margin-bottom:7px;
    padding-top:0;
    display:block;
  }
  .container .paragraph font {
    font-size: inherit;
  }

  .wsite-com-content{
    padding:0;
  }
  .short-header .banner-wrap{
    margin-bottom:1.5em;
  }
  .wsite-button-inner,
  .wsite-editor .wsite-button-inner {
    font-size: 0.8em;
  }
  .paragraph{
    font-size:1em!important;
    line-height:1.5em!important;
  }

/*  Nav */

  .navmobile-wrapper {
    position: fixed;
    display: block;
    opacity: 0;
    width: 275px;
    height: 100%;
    padding: 80px 0 20px 0;
    top: 0;
    left: 0;
    box-sizing: border-box;
    overflow-y: auto;
    background: @background;
    -webkit-transition: opacity 0s 1s linear;
    -moz-transitionpacity 0s 1s linear;
    -o-transition: opacity 0s 1s linear;
    transition: opacity 0s 1s linear;
  }

  #navmobile{
    margin: 0 15px;
    font-size:0.9em;
    text-transform:uppercase;
    letter-spacing:0.01em;
    font-family:'Raleway', sans-serif;
  }
  #navmobile ul{
    list-style-type:none;
    width:60%!important;
  }
  .nav-trigger,
  nav#nav-mobile {
      display:block;
      margin:10px;
  }
  #navigation,
  .wsite-menu-arrow,
  #wsite-menus {
      display:none;
  }
  .nav-trigger{
    display: table-cell;
    vertical-align: middle;
    width: 24px;
  }
  #navigation{
    display: none;
  }
  .wsite-nav-cart.wsite-nav-3 {
    position: absolute;
    top: -52px;
    right: 0;
  }
  .postload {
    height: 100%;
  }
  .postload .body-wrap {
      position: relative;
    width: 100%;
    min-height: 100%;
    }
  #wrapper {
    box-sizing:border-box;
      z-index:10;
      background: @footer;
      position: relative;
      width:100%;
      min-height:100%;
      padding-top:64px;
      -webkit-box-shadow:0px -0px 5px rgba(87, 87, 87, 0.2);
      -moz-box-shadow:0px -0px 5px rgba(87, 87, 87, 0.2);
      -o-box-shadow:0px -0px 5px rgba(87, 87, 87, 0.2);
      box-shadow:0px -0px 5px rgba(87, 87, 87, 0.2);
  }

  input.nav-trigger,
  input.nav-trigger-close {
    display:none;
  }

  body.menu-open #wrapper {
    left: 275px;
  }

  body.menu-open,
  body.menu-open .body-wrap {
    overflow: hidden;
  }

  body.menu-open .navmobile-wrapper {
    opacity: 1;
    -webkit-transition: opacity 0s 0s linear;
    -moz-transitionpacity 0s 0s linear;
    -o-transition: opacity 0s 0s linear;
    transition: opacity 0s 0s linear;
  }
  .close-btn {
    display:inline-block;
    padding:4px 0;
    margin:1px;
  }
  .open-btn {
    display: block;
    position: relative;
    z-index: 11;
    width: 24px;
    padding: 15px;
    cursorointer;
  }

    .wsite-menu-default a,
    .wsite-menu a{
      color:inherit;
      padding:10px;
      display:block;
    }
    .wsite-menu-default a:hover,
    .wsite-menu a:hover{
      background: @navBackgroundHover;
      color: @navHover;
    }
    .wsite-menu-back-item a,
    .wsite-menu-default a,
    .wsite-menu a{
      cursorointer;
    }
    .wsite-menu-back-item a{
      color:inherit;
    }
    .wsite-menu-mobile-arrow{
        display:inline-block!important;
        font-size:inherit!important;
        padding:0 5px;
    }
    .wsite-menu-mobile-arrow:before{
        display:inline-block;
        content:'\203A';
        vertical-align:bottom;
    }
    .wsite-menu-back-item .wsite-menu-mobile-arrow:before{
        content:'\2039';
    }
    .wsite-menu-slide li{
      margin:0 0 10px;
    }
    .wsite-menu-slide li#active a{
      background: @navBackgroundHover;
      color: @navHover;
    }
    .wsite-menu{
      margin-left:0;
    }



/* Mobile - Layouts 767
--------------------------------------------------------------------------------*/

@media (max-width:767px){

  .wsite-section-elements {
    overflow: hidden;
  }

/* Nav */

  #navmobile ul{
    width:100%!important;
  }

  .wsite-logo a {
    font-size: 1.25em;
  }


}

Mobile.js:

//// mobile.js submenu nav - all below
Weebly = Weebly || {};

Weebly.mobile_navigation = (function($) {

  var isOpen = false,
      isMoving = false,
      supportsTouch = false,
      pendingResizeData = null,
      isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false),
      supports3D = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()),
      supportsTouch = false,
      menuOffsetY = 0,
      $menuWrapper, $menu, $body, supports3D;


  /**
   * Add a css transition
   *
   * @param jquery $o object to animate
   * @param string property a css transitionable property
   * @param number speed the ms speed of animation
   * @param function cb callback function after animation completes
   * @return undefined
   */

  var addTransition = function($o, property, speed, cb) {
      if (!speed) {
        speed = 500;
      }

      $o.css({
        webkitTransitionDuration: speed + 'ms',
        webkitTransitionProperty: property,
        webkitTransitionTimingFunction: 'linear'
      });

      var onTransistionEnd = function(e) {
          $o.off('webkitTransitionEnd', onTransistionEnd);

          $o.css({
            webkitTransitionDuration: '',
            webkitTransitionProperty: '',
            webkitTransitionTimingFunction: ''
          });

          cb();
          }



      $o.on('webkitTransitionEnd', onTransistionEnd);
      };

  /**
   * Utility animate function for css transitions
   *
   * @param jquery $o object to animate
   * @param object from css properties to animate from
   * @param object to css properties to animate to
   * @param number speed the ms speed of animation
   * @param function cb callback function after animation completes
   * @return undefined
   */
  var animate = function($o, from, to, speed, cb) {
      if (!speed) {
        speed = 500;
      }
      if (supports3D) {

        $o.css({
          webkitTransitionDuration: '0ms'
        });
        $o.css(from);

        setTimeout(function() {
          addTransition($o, 'all', speed, cb);

          var props = {};
          for (property in to) {
            if (!to.hasOwnProperty(property)) {
              continue;
            }
            props[property] = to[property];
          }
          $o.css(props);
        }, 0);
      } else {
        //jquery.animate isn't working too well here, disable for now
        to.avoidCSSTransitions = true;
        $o.animate(to, {
          duration: speed,
          complete: cb
        });
      }
      };

  /**
   * Controls the menu effect when a menu button is tapped
   *
   * @param event e event handler
   * @return undefined
   */
  var menuTap = function(e) {
      var menuHeight = '100%',
          effectStart, effectEnd, fromCSS, toCSS;

      if (isMoving) {
        return;
      }

      isOpen = !isOpen;

      isMoving = true;

      if (isOpen) {
        $body.addClass('menu-open');
      }

      var cb = function() {
          isMoving = false;

          if (!isOpen) {
            $body.removeClass('menu-open');
          }
      };
  };

  /**
   * Tweens the menu left or right
   *
   * @param jquery $oldSlide the current slide being moved out
   * @param jquery $newSlide the new slide being moved in
   * @param bool rightToLeft move to the right if true, left if false
   * @return undefined
   */
  var tweenMenu = function($oldSlide, $newSlide, rightToLeft) {
      var $animContainer = $('.wsite-animation-wrap', $menu),
          sign = (rightToLeft) ? 1 : -1;

      if (isMoving) {
        return;
      }

      isMoving = true;

      var menuWidth = $menu.width();

      var toX = -sign * menuWidth + 'px';

      var fromCSS = {
        '-webkit-transform': 'translate3d( 0, 0px, 0)'
      };

      var toCSS = {
        '-webkit-transform': 'translate3d(' + toX + ', 0px, 0)'
      };

      if (supports3D) {
        $newSlide.css({
          '-webkit-transform': 'translate3d(' + (sign * menuWidth) + 'px, 0px, 0)'
        });
      } else {
        $newSlide.css({
          'left': (sign * menuWidth) + 'px'
        });

        fromCSS = {
          left: 0
        };
        toCSS = {
          left: toX
        };
      }

      $newSlide.show();

      var cb = function() {
          $oldSlide.hide();
          $animContainer.css(fromCSS);
          $newSlide.css(fromCSS);

          isMoving = false;
          };

      animate($animContainer, fromCSS, toCSS, 300, cb);
      };

  /**
   * Adds a an active state css class so that button presses
   * can be styled
   *
   * @param jquery $element element(s) to add state to
   * @param string tagName selector to filter dom elemenets
   * @return undefined
   */
  var addActiveState = function($element, tagName) {
      $element.on('touchstart', tagName, function(ev) {
        $(this).addClass('active');
      });
      $element.on('touchend', tagName, function(ev) {
        $(this).removeClass('active');
      });
      };


  /**
   * Measures the size of the content area to try and place footer
   * fixed at the bottom of the screen if the screen space is larger
   *
   * @return undefined
   */
  var resizeContentWindow = function() {};


  /**
   * Resizes the vertical height of the mobile menu
   *
   * @return undefined
   */
  var resizeMenu = function() {
      if (!$menu) {
        return;
      }
      var menuHeight = $menu.find('.wsite-menu-slide:visible').outerHeight();
      if (menuHeight > 0) {
        $menu.css({
          height: '100%',
          'overflow-y': 'auto',
          '-webkit-overflow-scrolling': 'touch'
        });
      }

      };

  /**
   * Inits the body to detect touch support
   *
   * @return undefined
   */
  var initBody = function() {
      $body = $('body');

      if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        $body.removeClass('no-touch');
        $body.addClass('touch');
        supportsTouch = true;
      }
      };


      /**
       * Inits the mobile menu structure
       *
       * @return undefined
       */

  var initMenu = function() {
		var $sideMenus = $('#navmobile .wsite-menu-wrap'),
			  $headerUl, $sliderContainer;

		  $headerUl = $('#navmobile .wsite-menu-default');

      $headerUl.wrap('<div class="wsite-mobile-menu" />');
      $menu = $headerUl.up('.wsite-mobile-menu');
      $menuWrapper = $headerUl.up('#wrapper');
      $menuWrapper = ($menuWrapper.length > 0) ? $menuWrapper : $menu;

      isOpen = false;
      isMoving = false;

      var slideCSS = {
        position: 'absolute',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%'
      };

      // something to select on
      $headerUl.addClass('wsite-menu-slide').css(slideCSS);
      $sideMenus.addClass('wsite-menu-slide').css(slideCSS);

      // new css settings can cause jarring while animations render,
      // set the settings here even though they don't really 'do anything'
      $headerUl.css({
        'left': '0'
      });
      if (supports3D) {
        $headerUl.css({
          '-webkit-transform': 'translate3d( 0, 0px, 0)'
        });
      }

      $menu.append('<div class="wsite-animation-wrap"></div>');
      $sliderContainer = $('.wsite-animation-wrap', $menu);
      $sliderContainer.css({
        position: 'relative',
        height: '100%'
      });
      if (supports3D) {
        $sliderContainer.css({
          '-webkit-backface-visibility': 'hidden'
        });
      }
      $sliderContainer.append($headerUl);

      $sideMenus.each(function() {
        var $sideMenu = $(this),
            $parentAnchor = $sideMenu.prev(),
            $ul = $sideMenu.children('ul'),
            $previousMenu = $sideMenu.parents('.wsite-menu-slide');

        var $backLink = $('<li class="wsite-menu-back-item">' + '<a><span class="wsite-menu-mobile-arrow"></span><span class="wsite-menu-back">Back</span></a>' + '</li>');
        $backLink.unbind("click");
        $backLink.on('click', function(ev) {
          tweenMenu($sideMenu, $previousMenu, false);
          return false;
        });


        if ($parentAnchor.attr("href")) {
          var $sideMenuRoot = $parentAnchor.clone(true, true);
          var $rootLink = $('<li class="wsite-menu-master-item"></li>').html($sideMenuRoot);
        }

        $ul.prepend($rootLink);
        $ul.prepend($backLink);

        $parentAnchor.unbind( "click" );
        $parentAnchor.append('<span class="wsite-menu-mobile-arrow"></span>');
        $parentAnchor.on('click', function(ev) {
          tweenMenu($previousMenu, $sideMenu, true);
          return false;
        });

        $sideMenu.css({
          'left': '0'
        });
        if (supports3D) {
          $sideMenu.css({
            '-webkit-transform': 'translate3d( 0, 0px, 0)'
          });
        }

        $sliderContainer.append($sideMenu);
      });

      $menu.css({
        'display': 'block'
      });
      $menuWrapper.css({
        'display': 'block'
      });
      resizeMenu();

      // prefer active state classes over html active
      if (supportsTouch) {
        addActiveState($('.wsite-home-link'));
        addActiveState($menu, 'a');
      }
      };

  /**
   * Close the menu
   *
   * @return undefined
   */
  var closeMenu = function() {
      if (isOpen) {
        menuTap(null);
      }
      };

  var isMenuOpen = function() {
      return isOpen;
      };

  var init = function() {
      $body = $('#icontent');
      $body = ($body.length > 0) ? $body : $('body');

      // May be able to dump this flag in the future,
      // but fixing 3d transition flickering issues was in theme css
      if (!$body.hasClass('wsite-render3d')) {
        supports3D = false;
      }

      initMenu();
      };

  if (!Weebly.mobile) {
    // reset iframe content sizes
    $(window).on("message", function(event) {
      if (!event.origin || event.origin.indexOf('weebly.com') === -1) {
        return;
      }

      pendingResizeData = event.data;
    });
  }

  // dom ready
  $(function() {

    setTimeout(function(){
      initBody();
      init();
    }, 1000);

    if (window.FastClick) {
      FastClick.attach($('.wsite-mobile-menu')[0]);
    }

  });

  return {
    init: init,
    closeMenu: closeMenu,
    resizeScreen: resizeContentWindow,
    resizeMenu: resizeMenu,
    menuTap: menuTap,
    isMenuOpen: isMenuOpen
  };

}(Weebly.jQuery));

Flyout - Item.tpl and list.tpl:

<li {{#id}}id="{{id}}"{{/id}}
	class="wsite-menu-subitem-wrap {{#is_current}}wsite-nav-current{{/is_current}}"
	>
	<a
		{{^nonclickable}}
			{{^nav_menu}}
				href="{{url}}"
			{{/nav_menu}}
		{{/nonclickable}}
		{{#target}}
			target="{{target}}"
		{{/target}}
		class="wsite-menu-subitem"
		>
		<span class="wsite-menu-title">
			{{{title_html}}}
		</span>{{#has_children}}<span class="wsite-menu-arrow">&gt;</span>{{/has_children}}
	</a>
	{{#has_children}}{{> navigation/flyout/list}}{{/has_children}}
</li>


#LIST

<div class="wsite-menu-wrap" style="display:none">
	<ul class="wsite-menu">
		{{#children}}{{> navigation/flyout/item}}{{/children}}
	</ul>
</div>

 Thanks in advance!

[Adam7]

Thanks for posting, @Quinn1. If you temporarily switch to a standard theme and publish again, does your mobile navigation work?

[Quinn11]

Hi Adam,

I am not entirely sure what is considered a "standard" theme but I have tried many other themes including birdseye and birdseye 2. It seems that no matter which theme I try the mobile nav menu does not work. Some themes result in the menu displaying a bullet point list of my pages rather than a hamburger menu at all. The ones that do display the menu do not function when pressed on a mobile device.

Thank you for your help

[Adam7]

What is the address of the website you are working on? I didn't see any sites in the account tied to your Community profile.

[Quinn11]

The address is [removed at request] Thank you for your help.

[Bernadette3 · Accepted solution]

It looks like the site was created by a third party hosting company. We do not have access to your account, but you should be able to reach out to your host directly HERE. 

[massimoWeebly]

Hi Bernedette, please helpe me!

www.skillme.app

In the mobile version the mobile does not work. The theme is original. i tried to change all themes but the problem persists.
thanks for support!

[Adam7]

It looks like that site was built with Weebly through Siteground, @massimoWeebly, so I can't log in to check for potential causes. I would check to see if any third party widgets are causing the issue (these can be added with the Embed Code element or to the Header code field for the site). If you don't find anything like that, I would contact Siteground so they can take a look.

[parth486]

@Quinn1

 can you please  let me know what was the solution you found, as I am facing same issue over the weewook.com