Responsive menu html css on small screens

Question

I want to make a responsive menu with only html and css , no Javascript. I'm still practising.. maybe anyone can see why my menu doesn't appear when clicking on the label?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="Frank.css">
    <meta name="author" content="Frank Van Hoek">
    <title>Frank</title>   
</head>

<body>
        <header>
            <div class="logo" class="cfx">
                <a href="away.html"><img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo"></a>
            </div>
            <div class="facebook" class="cfx"></div>
                <a href="https://www.facebook.com/groups/5254824441/?fref=ts"><img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook"> </a>

        </header>
    <div class="wrapper" class="cfx">

        <nav class="normaal" class="cfx">
            <ul class="menu" class="cfx">
                <li class="actief"><a href="Frank.html">Home</a></li>
                <li><a href="leden.html">Leden</a></li>
                <li><a href="parken.html">Parken</a></li>
                <li><a href="evenementen.html">Evenementen</a></li>
                <li><a href="overons.html">Over ons</a></li>
            </ul>                                        
        </nav>


        /************HAMBURGER***************/

        <nav class="hamburger">
            <input type="checkbox" id="menu-toggle">
            <label for="menu-toggle"></label>

            <ul>
                <li class="actief"><a href="Frank.html">Home</a></li>
                <li><a href="leden.html">Leden</a></li>
                <li><a href="parken.html">Parken</a></li>
                <li><a href="evenementen.html">Evenementen</a></li>
                <li><a href="overons.html">Over ons</a></li>
            </ul>
        </nav>


        <div class="content" class="cfx">
          <h2>BMX : Streetculture in Antwerp</h1>
            <video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
            <p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>

            <h1>Nieuwsfeeds</h1>
            <div class="nieuwsfeed">
                <p class="bericht">
                    Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de <a href="https://www.facebook.com/events/1012608095435859/">facebookpagina</a>.
                </p>
                <p class="datum">
                    4 maart 2015
                </p>
            </div>

            <div class="nieuwsfeed">
                <p class="bericht">
                    Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
                </p>
                <p class="datum">
                    2 maart 2015
                </p>
            </div>

            <div class="nieuwsfeed">
                <p class="bericht">
                    Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
                </p>
                <p class="datum">
                    26 februari 2015
                </p>
            </div>

             <div class="nieuwsfeed">   
                <p class="bericht">
                    Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
                </p>
                <p class="datum">
                    25 februari 2015
                </p>
            </div>
        </div>

        <footer>
            <p>© All rights reserved - 2015</p>
        </footer>
    </div>
</body>
</html>

CSS

html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}

img , video;
{
    max-width: 100%;
    height: auto;
}

body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}

.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}

header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}

.logo
{
padding: 0 1.25em;
float: left;
}

.imglogo
{
width: 170px;
height: 170px;
}

.facebook
{
    width: 40px;
    height: 40px;
    text-align:right;
    float:right;
    padding-top: 30px;
}

nav
{
    width: 100%;
    padding: 0px auto 0px auto;
}

ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}

.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}

.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}

.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}

.menu li:hover, li.actief
{
background-color: #f08222;
}

.menu li:hover > a, li.actief >a
{
color: #000;
}

.hamburger
{
    display: none;
}

.content
{
    color: #fff;
    display:block;
    margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}

.content video
{
    width: 760px;
    height: auto;
}

.content h1
{
    text-decoration: underline;
    margin: 50px auto;
}

.nieuwsfeed
{
    margin: 30px auto;
    padding: 0.625em;
    border: 1px solid #fff;
    border-radius: 5px;
}

.datum
{
    text-align: right;
    font-size: 0.8em;
}

.content a:link 
{
    color: #f08222;
}

.content a:visited
{
    color: #e2ff00;
}

footer p
{
    color: #fff;
    font-size: 0.9em;
    text-align: center;
    margin: 200px auto 40px auto;
}


/**************************
    *    MEDIA QUERY        *
    *************************/


@media screen and (max-width: 820px)
{
html, body {
            height: 100%;
        }

        body {
                    margin: 0;
                    overflow-x: hidden;
                    font-family: Arial, sans-serif;
                }

        .normaal
        {
            display:none;
        }

        .hamburger
        {
            display: inline-block;
        }

        #menu-toggle {
            display: none;
        }

        #menu-toggle:checked ~ .hamburger ul{
            left:0;
        }

        #menu-toggle:checked ~ .content {
            left:240px;
        }

        #menu-toggle:checked + label {
            left:250px;
        }

        label[for="menu-toggle"] {
            position: fixed;
            left:60px;
            top:300px;
            width: 30px;
            height: 30px;
            background-color: #0f0;
            z-index: 2;
        }

        .hamburger ul{
            position: fixed;
            width: 240px;
            height: 100%;
            top:300px;
            left: -240px;
            background-color: #e34dd2;
            color: white;
        }

        .hamburger ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .hamburger li a {
            display: block;
            padding:0.5em 1em;
            color: white;
            border-bottom: 1px #424240 solid;
        }

        .container {
            position: relative;
            left:0;
            padding: 2em;
        }

        nav, .container, label[for="menu-toggle"] {
            -webkit-transition: left 0.5s;
            transition: left 0.5s;
        }
}


 /*************************
    *     C L E A R F I X    *
    *************************/

.cfx::before, .cfx::after {
    display: table;
    line-height: 0;
    content: "";
}

.cfx::after {
    clear: both;
}

Answer 1

It would make more sense to use a responsive framework, such as Bootstrap , or Foundation .

Here is a simplistic example for a responsive navigation menu which utilises bootstrap.

Responsive navigation bar Preview
Responsive navigation bar Download

Answer 2

You have this:

.hamburger ul{
        position: fixed;
        width: 240px;
        height: 100%;
        top:300px;
        left: -240px;
        background-color: #e34dd2;
        color: white;
    }

position: fixed; means that its position values are in relation to the window/viewport. So having left: -240px; will move this element out of the viewport (ie make it invisible). Do you really want this? Even if that's intentionally and supposed to work together with this rule

 #menu-toggle:checked ~ .hamburger ul{
        left:0;
    }

...to move it in, they are in the wrong order - the former rule will most likely overwrite the other one, making the element invisible...

Responsive menu html css on small screens

Question

2 answers

solution1
0 2015-03-13 10:40:43

solution2
0 2016-06-19 21:39:26

Responsive menu html css on small screens

Question

2 answers

solution1 0 2015-03-13 10:40:43

solution2 0 2016-06-19 21:39:26

solution1
0 2015-03-13 10:40:43

solution2
0 2016-06-19 21:39:26