title: How to make my off-canvas menu scroll?
body: <p>I've been trying to get my off-canvas menu working by scrolling particularly in landscape mode because the list itself runs longer than the size of the screen. This menu is shown below 768px for tablet and mobile.</p>
  
  <p>To clarify, the menu items go longer then the screen space and I'm trying to get it to scroll by doing multiple methods, such as <strong>overflow-y: scroll, -webkit-overflow-scrolling: touch</strong> and more (all works in desktop browser at phone sizes when I was messing in the inspector). </p>
  
  <p>I've been trying everything to inspect the elements and get the menu to scroll when needed and not the background (website/page behind menu). Here is some of my markup and styling, I'm also including a live link to inspect as its way easier than pasting everything in here. Any help is kindly appreciated!</p>
  
  <p><a href="http://bit.ly/1eGCShX" rel="nofollow">LIVE LINK</a></p>
  
  <pre><code>&lt;body class="cbp-spmenu-push"&gt;
  &lt;nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left mobile" id="cbp-spmenu-s1"&gt;
      &lt;a class="m-storyLink mobile-nav-link" href=""&gt;1&lt;/a&gt;
      &lt;a href="/news" class="m-newsLink mobile-nav-link"&gt;2&lt;/a&gt;
      &lt;a href="/justmayo" class="m-mayoLink mobile-nav-link"&gt;3&lt;/a&gt;
      &lt;a href="#" class="mobile m-contactHead show-for-small-only mobile-nav-link"&gt;3&lt;/a&gt;
      &lt;a href="" class="show-for-medium-only m-contactHead mobile-nav-link fancybox fancybox.iframe" data-fancybox-type="iframe" href="contact-form.php"&gt;Contact Us&lt;/a&gt;
      &lt;a href="#" class="mobile mobile-nav-link m-phone-num"&gt;4&lt;/a&gt;
        &lt;ul class="mobile-social"&gt;
            &lt;li&gt;&lt;a href="//www.facebook.com/" target="_blank" class="mobile-fb"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="//twitter.com/" target="_blank" class="mobile-twit"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="" class="mobile-goog"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;header id="header" class="header headroom headroom--pinned"&gt;
    &lt;!-- mobile header --&gt; 
    &lt;div class="mobile"&gt;
      &lt;button id="showLeftPush"&gt;MENU&lt;/button&gt;
      &lt;a href="#top" class="mobile-logo mobile"&gt;&lt;img src="img/home/logo.png" alt="#"&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>.cbp-spmenu-push-toright {
  left: 240px!important;
  }
  
  .cbp-spmenu-push-toright.cbp-spmenu-push {
  overflow: hidden;
  position: fixed;
  }
  /* General styles push menu*/
  .cbp-spmenu {
      background-color: #000;
      position: fixed;
     font-family: FranklinGothicLTCom-BkCm, "Arial Narrow", sans-serif;
     padding: 110px 0 0 0;
   }
  
    .mobile-nav-link {
      background-position: 10px center;
    }
  
  
    /* Orientation-dependent styles for the content of the menu */
  
    .cbp-spmenu-vertical {
      width: 240px;
      min-height: 300px;
      height: 100%;
      top: 0;
      z-index: 1000;
      -webkit-transition: all 250ms ease-in-out;
      -moz-transition: all 250ms ease-in-out;
      -ms-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
      overflow-y: scroll !important;
      -webkit-overflow-scrolling: touch;
    }
  
  
    .cbp-spmenu-left {
      left: -240px;
    }
  
    .cbp-spmenu-right {
      right: -240px;
    }
  
    .cbp-spmenu-left.cbp-spmenu-open {
      left: 0px;
    }
  
    .cbp-spmenu-right.cbp-spmenu-open {
      right: 0px;
    }
  
    /* Horizontal menu that slides from the top or bottom */
  
    .cbp-spmenu-top {
      top: -150px;
    }
  
    .cbp-spmenu-bottom {
      bottom: -150px;
    }
  
    .cbp-spmenu-top.cbp-spmenu-open {
      top: 0px;
    }
  
    .cbp-spmenu-bottom.cbp-spmenu-open {
      bottom: 0px;
    }
  
    /* Push classes applied to the body */
  
    .cbp-spmenu-push {
      position: relative;
      left: 0;
      -webkit-transition: all 250ms ease-in-out;
      -moz-transition: all 250ms ease-in-out;
      -ms-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
    }
  </code></pre>
  
  <p>LIVE LINK: <a href="http://bit.ly/1eGCShX" rel="nofollow">http://bit.ly/1eGCShX</a></p>