Menu icon Foundation
off-canvas-menu not scrolling in mobile

I am using Foundation 5.2.2, my left-off-canvas-menu and right-off-canvas-menu are not scrolling in mobile. I am able to scroll the . I searched in the forums and tried with html,

body, .off-canvas-wrap, .inner-wrap, .main-section
{
height: 100%;
}

even its not working. Please help me..

<div class="page">
          <div class="off-canvas-wrap" id="off-canvas-wrap">
<div class="inner-wrap testclass">
            <nav class="tab-bar">
              <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon"> <img src="img/get-help-icon-small-dark-gray.png" alt="icon" class="pencil-icon-top"></a>
              </section>
        
              <section class="middle tab-bar-section text-center">
                <h1 class="title bold"> <a href="index.php" class="black">   <img src="img/logo.png" alt="logo" class="logo-img"></a> </h1>
              </section>
        
              <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
              </section>
            </nav>
        
            <aside class="left-off-canvas-menu">
              <h5 class="off-canvas-heading1 "> <img src="img/get-help-icon-small.png" alt="icon"> Get help on our Courses </h5>
                
                    <div class="row">
                    <div class="small-12 columns">
                        <?php include("form.html"); ?>
                    </div>
      </div>
                    
                    <div class="off-canvas-placeholder">  </div>
            </aside>
        
            <aside class="right-off-canvas-menu">
              <ul class="off-canvas-list">
                <li><label class="off-canvas-heading2"> Menu </label></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-developer-icon.gif" alt="placeholder">  links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3">   <img src="img/g-designer-icon.gif" alt="placeholder">  links 1links 1links 1links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-anim-icon.gif" alt="placeholder">  links 1links 1links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-qa-icon.gif" alt="placeholder"> links 1links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-app-pro-icon.gif" alt="placeholder"> links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"><img src="img/g-app-dev-icon.gif" alt="placeholder" > links 1</a></li>
                <li class="gray-light-bg"><a href="#"  class="black3"> <img src="img/get-help-icon-small.png" alt="placeholder" class="orange-blue-bg"> Request More Info.</a></li>
                
                <li> <a href="index.php" class="no-border-left black3 nav-links2"> Home </a> </li>
                <li> <a href="about.php" class="no-border-left black3 nav-links2"> About Us </a> </li>
                <li> <a href="testimonials.php" class="no-border-left black3 nav-links2"> Testimonials </a> </li>
                <li> <a href="faqs.php" class="no-border-left black3 nav-links2"> FAQ's </a> </li>
                <li> <a href="contact.php" class="no-border-left black3 nav-links2"> Contact Us </a> </li>
                <li> <a href="terms.php" class="no-border-left black3 nav-links2"> Terms & Conditions </a> </li>
                
                
              </ul>
              <div class="off-canvas-placeholder">  </div>
            </aside>
        
            <section class="main-section"> 
            
 </section>
  <a class="exit-off-canvas"></a>
        
          </div>
        </div>
  </div>
   <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.accordion.js"></script>
    <script src="js/app.js"></script>
    <script src="js/jquery.nicescroll.js"></script>
    <script type="text/javascript"> 
       <!--Nice Scroll Code-->
		$(document).ready(
		
		  function() { 
		  $(".left-off-canvas-menu, .right-off-canvas-menu").niceScroll();
		  }
		);
	</script>

    
    <script>
      $(document).foundation({
		  accordion: {
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: false,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }

		  });
    </script>
    
    <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.touchSwipe.min.js"></script>
  <script src="js/jquery.liquid-slider.js"></script>  
  <script>
     $('#main-slider').liquidSlider({
		
		dynamicTabs: false,
		dynamicArrows: true,
		hoverArrows: false,
		slideEaseFunction: "easeOutExpo"
	 
	});

    /* If you need to access the internal property or methods, use this:
    var api = $.data( $('#slider-id')[0], 'liquidSlider');
    */
  </script>
   </body>
</html>
         

foundation 5.2.2

I am using Foundation 5.2.2, my left-off-canvas-menu and right-off-canvas-menu are not scrolling in mobile. I am able to scroll the . I searched in the forums and tried with html,

body, .off-canvas-wrap, .inner-wrap, .main-section
{
height: 100%;
}

even its not working. Please help me..

<div class="page">
          <div class="off-canvas-wrap" id="off-canvas-wrap">
<div class="inner-wrap testclass">
            <nav class="tab-bar">
              <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon"> <img src="img/get-help-icon-small-dark-gray.png" alt="icon" class="pencil-icon-top"></a>
              </section>
        
              <section class="middle tab-bar-section text-center">
                <h1 class="title bold"> <a href="index.php" class="black">   <img src="img/logo.png" alt="logo" class="logo-img"></a> </h1>
              </section>
        
              <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
              </section>
            </nav>
        
            <aside class="left-off-canvas-menu">
              <h5 class="off-canvas-heading1 "> <img src="img/get-help-icon-small.png" alt="icon"> Get help on our Courses </h5>
                
                    <div class="row">
                    <div class="small-12 columns">
                        <?php include("form.html"); ?>
                    </div>
      </div>
                    
                    <div class="off-canvas-placeholder">  </div>
            </aside>
        
            <aside class="right-off-canvas-menu">
              <ul class="off-canvas-list">
                <li><label class="off-canvas-heading2"> Menu </label></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-developer-icon.gif" alt="placeholder">  links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3">   <img src="img/g-designer-icon.gif" alt="placeholder">  links 1links 1links 1links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-anim-icon.gif" alt="placeholder">  links 1links 1links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-qa-icon.gif" alt="placeholder"> links 1links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"> <img src="img/g-app-pro-icon.gif" alt="placeholder"> links 1links 1 </a></li>
                <li class="gray-light-bg"><a href="#" class="black3"><img src="img/g-app-dev-icon.gif" alt="placeholder" > links 1</a></li>
                <li class="gray-light-bg"><a href="#"  class="black3"> <img src="img/get-help-icon-small.png" alt="placeholder" class="orange-blue-bg"> Request More Info.</a></li>
                
                <li> <a href="index.php" class="no-border-left black3 nav-links2"> Home </a> </li>
                <li> <a href="about.php" class="no-border-left black3 nav-links2"> About Us </a> </li>
                <li> <a href="testimonials.php" class="no-border-left black3 nav-links2"> Testimonials </a> </li>
                <li> <a href="faqs.php" class="no-border-left black3 nav-links2"> FAQ's </a> </li>
                <li> <a href="contact.php" class="no-border-left black3 nav-links2"> Contact Us </a> </li>
                <li> <a href="terms.php" class="no-border-left black3 nav-links2"> Terms & Conditions </a> </li>
                
                
              </ul>
              <div class="off-canvas-placeholder">  </div>
            </aside>
        
            <section class="main-section"> 
            
 </section>
  <a class="exit-off-canvas"></a>
        
          </div>
        </div>
  </div>
   <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.accordion.js"></script>
    <script src="js/app.js"></script>
    <script src="js/jquery.nicescroll.js"></script>
    <script type="text/javascript"> 
       <!--Nice Scroll Code-->
		$(document).ready(
		
		  function() { 
		  $(".left-off-canvas-menu, .right-off-canvas-menu").niceScroll();
		  }
		);
	</script>

    
    <script>
      $(document).foundation({
		  accordion: {
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: false,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }

		  });
    </script>
    
    <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.touchSwipe.min.js"></script>
  <script src="js/jquery.liquid-slider.js"></script>  
  <script>
     $('#main-slider').liquidSlider({
		
		dynamicTabs: false,
		dynamicArrows: true,
		hoverArrows: false,
		slideEaseFunction: "easeOutExpo"
	 
	});

    /* If you need to access the internal property or methods, use this:
    var api = $.data( $('#slider-id')[0], 'liquidSlider');
    */
  </script>
   </body>
</html>
         
Alexander Assimidis over 5 years ago

Could u post us a link to ur Site that would be much easier

K Lim over 5 years ago

You need to add data-offcanvas in

<div class="off-canvas-wrap">