How to make my off-canvas menu scroll?
Question
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!
<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.com/" target="_blank" class="mobile-fb"></a></li>
<li><a href="//twitter.com/" 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
1 answers
solution1
4 ACCPTED 2014-03-08 06:52:31
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.