"Hamburger-Icon" für Nav wird in der Mobilen Ansicht nicht angezeigt

[newpower001]

Hey,

Wie schon im Titel steht wird es nicht angezeigt. Hab mir etwas Hilfe aus einem Video gesucht jedoch klappt es nicht.

Html Code:

Im Head Bereich ist noch ein Java-Script , der dazu dient , das es beim Anklicken sich auflistet.

Spoiler

    <script type="text/javascript">
            $(document).ready(function() {
                $('.menu-icon').click(function() {
                    $('nav').slideToggle('slow');
                });
            });
        </script>

Spoiler

<nav>
<ul>
<li><a href="#" class="menu-icon" href="#menu"><img src="images/menu.png"></a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Einleitung</a></li>
<li><a href="#">Loslegen</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
</ul>
</nav>

CSS + @ Media für Nav

Spoiler

nav {
padding:0;
display:block;
text-align:center;
margin:0em auto;
}

nav ul {
display:block;
}

nav ul li {
list-style:none;
display:inline;
}

nav ul li a {
font-family:tahoma;
font-weight:normal;
color:#333;
text-decoration:none;
line-height:1.2em;
padding:1em;
}

nav ul li a:hover {
color:#dcdcdc;
}

.menu-icon {
display:none;
}

@media screen and (min-width:500px) {
nav {
display:block !important;
}
}


@media screen and (max-width:500px) {
nav {
display:none;
height:auto;
}
nav ul li {
display:block;
margin:0.3em 0em 0.3em 0em;
}
.menu-icon {
display:block;
}
}

 

[bodo92]

Wenn dein Menu-Icon innerhalb der Nav liegt wird diese natürlich nicht angezeigt...

Beschäftige mich derzeit auch damit und mir sind nur Beispiele bekannt deren Toggle auserhalb der Nav liegt..

also ..

<div id="nav-toggle"><span class="hamburger"></span></div>
<nav>
    <ul>
        <li>...</li>
        ...
    </ul>
</nav>