jQuery, slicknav plugin, long menu overflow y

Question

Im using the slicknav plugin for my mobile menu, but encounter the following problem: the menu has to be fixed on top, but my menu is rather long and for smaller screens it is impossible to navigate through all of the items. I tried separating the mobile trigger (positioning fixed) and the menu itself relative, but that doesn't work, as well as adding overflow-y on scroll and auto for the menu wrapper itself. Anyone can help me with some sort of solution or has encountered similar with this plugin? html:

<ul id="menu2">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

js:

$('#menu2').slicknav({prependTo:'#mobileMenuHolder'});

css: (not working)

#mobileMenuHolder, .slicknav_menu{
  overflow-y: scroll;
  position: relative;
}

mobileMenuHolder holds the menu and is at the bottom of the fixed div.

Thanks for all help provided.

jsfiddle

Answer 1

You might be better off modifying the css of the plugin itself. Can you post an example jsfiddle? Issue could be fixed pixel definitions. I'm not too familiar with mobile but for sure it's a CSS thing.

Answer 2

I know its a long time since the issue posted, but I encountered the same problem, so I'll post here my solution. When you init the slicknav menu you should add respective callbacks to toggle a certain class to a container on its open state, better on body. This way if you have a possibility to style the opened state and add a little css to make it hide the scroll-bar on small heights screens.

Here's how you init the slicknav:

var $container = $('body'); $('#menu2').slicknav({ duplicate:false, //adjust if you have an un-responsive menu to begin with label: 'Menu', beforeOpen: function(e) {
if(e.hasClass('slicknav_btn')){ $container.addClass('slicknav_open'); } }, beforeClose: function(e) { if(e.hasClass('slicknav_btn')){ $container.removeClass('slicknav_open'); } } });

and then the css(put this in your @media query):

html,body{
    height:100%;
    margin:0
}

.slicknav_open .slicknav_menu {
    height: 100%;
    overflow-y: scroll;
    width: calc(100% + 22px);
    margin-right: -22px;
    position:fixed;
    top:0;
    left:0;

}
#menu2{
 height: auto;   
}

Here's a fiddle for demo: http://jsfiddle.net/9vvanrj2/