javascript - How to make my off-canvas menu scroll?

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.

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 overflow-y: scroll, -webkit-overflow-scrolling: touch and more (all works in desktop browser at phone sizes when I was messing in the inspector).

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!

LIVE LINK

<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left mobile" id="cbp-spmenu-s1">
    <a class="m-storyLink mobile-nav-link" href="">1</a>
    <a href="/news" class="m-newsLink mobile-nav-link">2</a>
    <a href="/justmayo" class="m-mayoLink mobile-nav-link">3</a>
    <a href="#" class="mobile m-contactHead show-for-small-only mobile-nav-link">3</a>
    <a href="" class="show-for-medium-only m-contactHead mobile-nav-link fancybox fancybox.iframe" data-fancybox-type="iframe" href="contact-form.php">Contact Us</a>
    <a href="#" class="mobile mobile-nav-link m-phone-num">4</a>
      <ul class="mobile-social">
          <li><a href="//www.facebook/" target="_blank" class="mobile-fb"></a></li>
          <li><a href="//twitter/" target="_blank" class="mobile-twit"></a></li>
          <li><a href="" class="mobile-goog"></a></li>
      </ul>
</nav>

<header id="header" class="header headroom headroom--pinned">
  <!-- mobile header --> 
  <div class="mobile">
    <button id="showLeftPush">MENU</button>
    <a href="#top" class="mobile-logo mobile"><img src="img/home/logo.png" alt="#"</a>
  </div>

And CSS

.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;
  }

LIVE LINK:

LIVE LINK

<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left mobile" id="cbp-spmenu-s1">
    <a class="m-storyLink mobile-nav-link" href="">1</a>
    <a href="/news" class="m-newsLink mobile-nav-link">2</a>
    <a href="/justmayo" class="m-mayoLink mobile-nav-link">3</a>
    <a href="#" class="mobile m-contactHead show-for-small-only mobile-nav-link">3</a>
    <a href="" class="show-for-medium-only m-contactHead mobile-nav-link fancybox fancybox.iframe" data-fancybox-type="iframe" href="contact-form.php">Contact Us</a>
    <a href="#" class="mobile mobile-nav-link m-phone-num">4</a>
      <ul class="mobile-social">
          <li><a href="//www.facebook./" target="_blank" class="mobile-fb"></a></li>
          <li><a href="//twitter./" target="_blank" class="mobile-twit"></a></li>
          <li><a href="" class="mobile-goog"></a></li>
      </ul>
</nav>

<header id="header" class="header headroom headroom--pinned">
  <!-- mobile header --> 
  <div class="mobile">
    <button id="showLeftPush">MENU</button>
    <a href="#top" class="mobile-logo mobile"><img src="img/home/logo.png" alt="#"</a>
  </div>

And CSS

.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;
  }

LIVE LINK: http://bit.ly/1eGCShX

Share Improve this question edited Mar 8, 2014 at 6:39 asked Mar 8, 2014 at 3:12 DoPeT 3091 gold badge4 silver badges16 bronze badges

I've looked at your example site (nice looking site), I have no idea what menu you are referring too. – pedalpete Commented Mar 8, 2014 at 6:36
@pedalpete Thank you for answering, I will clarify! I meant for resolution size of 768 pixels or lower! P.S. Cyclist? Right on mate. – DoPeT Commented Mar 8, 2014 at 6:38

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

cbp-spmenu has a min-height of 550px. This is what is limiting your ability to scroll it in smaller resolutions.

Remove the min-height and you should be fine. Of course, do it as a media query, so it only is in effect on mobile devices.

-----------update----------------

not sure if you just changed it, but I took another look and now I don't see the min-height, but adding overflow:auto to the same cbp-spmenu element also makes it scroll.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make my off-canvas menu scroll? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)