Mobile Slide Navigation Not Appearing on Click

Question

I have inherited a mobile navigation slider that was implemented on a previous site by another coder / programmer. I'm trying to re-build the slider on a new site and although I copied the HTML, CSS and script into the new environment, I'm not having any luck with it functioning. I have a feeling that I am missing something in the process, but I cannot determine what it might be.

I've posted my code below, but have also have a fiddle set up, including the connection to the 3.2.1 library that is used on the site: https://jsfiddle.net/Lhypng9j/6/

Any assistance, either with helping get this running or direction to resources that might be able to assist will be greatly appreciated!

Thanks.

Here is my HTML:

            <div id="m-toggle" class="icon-bars">
                <span></span>
            </div>
            <nav class="mobile-nav">
                <ul>
                    <li><a href="index.html">Events</a></li>
                    <li><a href="service-category.html">Self-Service</a></li>
                    <li><a href="connect-page.html">Connect</a></li>
                    <li><a href="#">Gallery</a></li>
                </ul>
            </nav>

My CSS:

#m-toggle {
  background-color:red;
  width:50px;
  height:50px;
  display: block;
  position: absolute;
  right: 20px;
  top: 45px;
  cursor: pointer;
  font-size: 28px; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 0px;
  right: -280px;
  width: 280px;
  height: 2000px;
  float: none;
  margin-top: 0;
  background: #fff;
  z-index: 3; }

  .mobile-nav:before {
    content: '';
    height: 4px;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1; }

  .mobile-nav > ul > li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #D8D8D8;
    font-size: 12px;
    position: relative;
    transition: all 0.15s;
    cursor: pointer;
    }

    .mobile-nav > ul > li.x {
      border-bottom: none;
      background: #fff; }

      .mobile-nav > ul > li.x a {
        color: #79bde9; }

      .mobile-nav > ul > li.x:before {
        color: #666;
        content: '-';
        top: 8px;
        cursor: pointer; }

    .mobile-nav > ul > li a {
      color: #666; }

      .mobile-nav > ul > li a:hover {
        color: #79bde9; }

    .mobile-nav > ul > li > a {
      padding: 11px 0px 11px 20px;
      font-size: 20px;
      width: 100%;
      display: block; }

    .mobile-nav > ul > li > ul li:not(.track) a {
      font-size: 16px;
      font-weight: 500;
      padding-left: 30px; }

  .mobile-nav.active {
        display: block; }

And my script (in an external js file):

$('#m-toggle').on('click',function(){
        $(this).toggleClass('x');
        $('.mobile-nav').slideToggle(150);
    });

    $(window).on('resize',function(){
        var ww = $(window).width();
        if(ww > 960){
            $('.mobile-nav').removeAttr('style');
            $('#m-toggle').removeClass('x');
        }
    })

    $('#menu-mobile-nav>li').on('click', function() {
        $('#menu-mobile-nav li .sub-menu').each(function() {
            if($(this).is(":visible")) {
                $(this).toggleClass('x').slideUp();
            }
        });
        if($(this).children('.sub-menu').length) {
            $(this).toggleClass('x');
            if(!$(this).children('.sub-menu').is(":visible")) {

                $(this).children('.sub-menu').slideToggle();

            }
            return false;
        }
    });

    $('a').on('click',function(e){
        e.stopPropagation();
    });

Answer 1

You need to adjust your top and right values for .mobile-nav

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

$('#m-toggle').on('click',function(){
        $(this).toggleClass('x');
        $('.mobile-nav').slideToggle(150);
    });

    $(window).on('resize',function(){
        var ww = $(window).width();
        if(ww > 960){
            $('.mobile-nav').removeAttr('style');
            $('#m-toggle').removeClass('x');
        }
    })

    $('#menu-mobile-nav>li').on('click', function() {
		$('#menu-mobile-nav li .sub-menu').each(function() {
			if($(this).is(":visible")) {
				$(this).toggleClass('x').slideUp();
			}
		});
		if($(this).children('.sub-menu').length) {
            $(this).toggleClass('x');
			if(!$(this).children('.sub-menu').is(":visible")) {

				$(this).children('.sub-menu').slideToggle();

			}
			return false;
		}
	});

    $('a').on('click',function(e){
        e.stopPropagation();
    });

#m-toggle {
  background-color:red;
  width:50px;
  height:50px;
  display: block;
  position: absolute;
  right: 20px;
  top: 45px;
  cursor: pointer;
  font-size: 28px; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 95px;
  right: 25px;
  width: 280px;
  height: 2000px;
  float: none;
  margin-top: 0;
  background: #fff;
  z-index: 3; }
  
  .mobile-nav:before {
    content: '';
    height: 4px;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1; }
    
  .mobile-nav > ul > li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #D8D8D8;
    font-size: 12px;
    position: relative;
    transition: all 0.15s;
    cursor: pointer;
    }
    
    .mobile-nav > ul > li.x {
      border-bottom: none;
      background: #fff; }
      
      .mobile-nav > ul > li.x a {
        color: #79bde9; }
        
      .mobile-nav > ul > li.x:before {
        color: #666;
        content: '-';
        top: 8px;
        cursor: pointer; }
        
    .mobile-nav > ul > li a {
      color: #666; }
      
      .mobile-nav > ul > li a:hover {
        color: #79bde9; }
        
    .mobile-nav > ul > li > a {
      padding: 11px 0px 11px 20px;
      font-size: 20px;
      width: 100%;
      display: block; }
      
    .mobile-nav > ul > li > ul li:not(.track) a {
      font-size: 16px;
      font-weight: 500;
      padding-left: 30px; }
      
  .mobile-nav.active {
        display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="m-toggle" class="icon-bars">
  <span></span>
</div>

<nav class="mobile-nav">
  <ul>
    <li><a href="#">Item 01</a></li>
    <li><a href="#">Item 02</a></li>
    <li><a href="#">Item 03</a></li>
    <li><a href="#">Item 04</a></li>
    </ul>
</nav>