Mobile menu does not open

Question

I've got a menu that I want to hide/ show by changing it's top position.

Before I log in the menu looks like this:

<div class="lc">
    <h1><a href="./"><img src="logo.png" /></a></h1>
    <a href="#" id="menuBtn"></a>
    <nav id="mainNav">
        <ul>
            <li><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
        </ul>
    </nav>
</div>

After I log in, some items are added:

<div class="lc">
    <h1><a href="./"><img src="logo.png" /></a></h1>
    <a href="#" id="menuBtn"></a>
    <nav id="mainNav">
        <ul>
            <li><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
        </ul>
        <div class="nav-admin">
            <strong>Administrator links:</strong><br />
            <a href="....php?users">...</a><br />
            <a href="....php?user_logs">...</a><br />
            <a href="....php?dealer_logs">...</a><br />
            <a href="....php?herd_logs">...</a><br />
            <a href="....php?php_logs">...</a>
        </div>
    </nav>
</div>

This CSS belongs to it:

.lc, nav, h1 {
    background: #fdf6bf;
    background: #FDD;
}
.lc {
    position: fixed;
    z-index: 200;
    width: 14em;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: .5em;
    overflow: auto;
}
    h1 {
        width: 100%;
        font-size: 1em;
        margin-top: 0;
        margin-bottom: .5em;
    }
        h1 a {
            display: block;
            width: 100%;
            text-align: center;
        }
            h1 a img { max-width: 70%; }

    nav ul { list-style: none; }
    nav ul li { padding: .75em 0 .75em 4.25em; }
    nav ul li.is-active { background: #fdf9dc; }
    nav ul li.is-active a:after {
        content: "\232A";
        position: absolute;
        right: .25em;
        top: -.05em;
        font-size: 3em;
        height: 1em;
        line-height: 1em;
        vertical-align: middle;
        color: #c9c49d;
    }

    nav ul a,
    .btn-add {
        display: block;
        position: relative;
        height: 3em;
        padding-left: 1em;
        line-height: 3em;
        vertical-align: middle;
        font-family: 'Exo', sans-serif;
        text-decoration: none;
        color: #4f4e4c;
        font-size: 1em;
        font-weight: 600;
    }
        nav ul a:before,
        .btn-add:before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            margin-top: -1.75em;
            width: 3.5em;
            height: 3.5em;
            background: url(images/menu_home.png) center center no-repeat;
            background-size: cover;
        }

.nav-show { top: 0; }
.no-scroll { overflow: hidden; }

@media screen and (max-width: 550px) { 
    * { font-size: 1em; }
    nav {
        position: fixed;
        z-index: 180;
        top: -100%;
        left: 0;
        padding-top: 4.5em;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        background: #fffad5;
    }
    nav ul li.is-active { background: #fffcea; }

    .lc {
        position: fixed;
        width: 100%;
        height: 3.5em;
        overflow: hidden;
    }

To trigger the menu I use

$(function() {
    $('#menuBtn').on('click', function(e) {
        $('body').toggleClass('no-scroll');
        $('#mainNav').toggleClass('nav-show');
        e.preventDefault();
    });
});

The problem is that the menu does show before the login. But after that, I am not able to open the menu. This problem isn't on the desktop PC, but only on mobile phones (Android). I've tried various phones and browser, but they all have the same issue.

Anyone got an idea?

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Did you try to add .nav-show { top: 0; } in @media screen and (max-width: 550px) { too ?

Since this .nav-show { top: 0; } is stated before the @media...
The top:-100px stays.

If found this answer to be sure of it.
It is well explained.

The problem is that your element gets top: -100% from nav{ in the @media AND top:0 from .nav-show. The last defined is used.
;)

edited May 23 '17 at 11:52

Community

1
1

answered Jul 02 '16 at 06:20

Louys Patrice Bessette

33,375
6
36
64

Although you are right, this didn't fix the problem. – GreyRoofPigeon Jul 02 '16 at 20:43

score 0 · Answer 2 · answered Jul 02 '16 at 06:38

Try this, Even position:fixed works, but you need to add some px to top (i.e around 70px), but this hides your additional links.

   @media screen and (max-width: 550px) { 
            * { font-size: 1em; }
            nav {
               position:relative;
                padding-top: 4.5em;
                width: 100%;
                height: 100%;
               -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
                background: #fffad5;
            }
            nav ul li.is-active { background: #fffcea; }

            .lc {
                position: fixed;
                width: 100%;
                height: 100%;

            }
}

Changing it to a relative or absolute position makes no difference... thanks for the effort tho! — GreyRoofPigeon, Jul 02 '16 at 12:01
@LinkinTED could solve, if we work on working example, as fiddle doesn't show that php codes, can't solve much there. — frnt, Jul 02 '16 at 14:28

score 0 · Accepted Answer · answered Jul 02 '16 at 20:46

It seems that the Android browser handles fixed position differently that ie Firefox.

Especially a fixed div inside a fixed div.
The menu didn't show because .lc is only 3.5em high and got a hidden overflow. So by toggling an extra class to .lc to make it expand I solved the problem.

.lc-expand { max-height: 100%; }

$('#menuBtn').on('click', function(e) {
    $('body').toggleClass('no-scroll');
    $('.lc').toggleClass('lc-expand');
    $('#mainNav').toggleClass('nav-show');
    e.preventDefault();
});

Mobile menu does not open

3 Answers3