search

ComputerWolf / SlickNav

Responsive Mobile Menu Plugin for jQuery
MIT License
939 stars 314 forks source link

How to put Slicknav on it's own level (so it doesn't push down content) #12

Closed kat2014 closed 10 years ago

kat2014 commented 10 years ago

Hello,

I love this responsive menu!

How would/could I get it so that Slicknav appeared on top of the rest of the HTML? Is this possible? (i.e. so that it doesn't push the rest of the content down when opened?)

I thought giving it a high z-index would do the trick, so I added the following to my CSS, but it doesn't work.

.js .slicknav_menu {
        z-index:99999;
    }

I'd be grateful for any advice—including any that suggests my goal is a bad idea for any reason.

Thanks in advance,

Kat

ComputerWolf commented 10 years ago

Try the following:

.slicknav_menu {
    position:fixed;
    width:100%;
}

If you experience some flicker while scrolling, you may need to apply the CSS to a parent div instead of directly to the SlickNav. If that doesn't work, some have found that it may help if you set transform: translate3d(0,0,0) with the proper browser prefixes.

kat2014 commented 10 years ago

Hi @ComputerWolf,

Thanks so much! Initially this worked a charm with no flickering at all. I subsequently realized that my initial question didn't pose exactly what I wanted. In order so that the initial button strip didn't overlay the rest of my HTML, but the expanding navigation did, i ended up using the following CSS instead (based on yours):

ul.slicknav_nav {
    position:fixed;
       width:100%;
    background-color:#333;
    margin-top:50px;
}

This seems to partially achieve my goal, but i notice some width issue and some flickering (though I'm not sure the flickering is because i can't remove my finger from the hover state as it expands fast enough-which i think is the case).

Besides the modification above, i'm using the default CSS supplied with the download.

I'll now investigate your solution to the flicker, to see if it applies to my situation.

Thanks again.

andreas-stricker commented 9 years ago

the position fixed works with a small menu. In my case i have a long menu - so the height is larger than the screen height and i can't scroll in the menu because it is fixed. do you have a solution for this problem?