Make meanmenu position fixed

Question

I'm using the meanmenu plugin for as a responsive menu for mobile. I would like to make the position of the menu fixed, so it can be accessed from the bottom of the page.

But when the position of the meancontainer is set to fixed instead of relative it aren't possible to scroll trough the menu when it expands.

I'm using the following mark-up:

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
    width: 100%;
    height: 40px;
    position: relative;
    background: #fff;
    padding: 4px 0;
    border-bottom: 1px solid rgba(157, 157, 157, 0.2);
    z-index: 999999;
    top: 0;
}

 .mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: rgba(157,157,157,1);
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

Plug-in source: https://github.com/meanthemes/meanMenu Page source: https://premonk.com

Incldue your HTML too, and/or in a [JsFiddle](http://jsfiddle.net) so we can play around towards a solution. — urbz, Nov 07 '14 at 12:28
Can't really get it to work with JsFiddle, but the site is already online. www.premonk.com //you're browser size has to be below 1080px width. You can try checking it with the inspector tool:) — Simon Eldevig, Nov 07 '14 at 13:20

score 0 · Answer 1 · answered Feb 22 '15 at 11:13

You can make somrthing like this :

    .mean-container .mean-nav {
        float: left;
        width: 100%;
        background: none repeat scroll 0% 0% #FFF;
        margin-top: 44px;

        position:fixed

    }

.meanclose{
        height: 2000px;
        overflow: scroll;
}

height value can you simply change it to the maximum height of your expanded menu.

Make meanmenu position fixed

1 Answers1