Problem mit der Navigation in der mobilen Ansicht

Sundream

Hey,

ich möchte gerne, dass die Navigation, wenn der Bildschirm kleiner als 550px ist über das Navigationsicon (hamburgericon) funktioniert und habe das mit css und js versucht, aber es tut sich nichts... Kann mir vielleicht jemand weiterhelfen?
Danke schonmal !

HTML:

HTML

<head>
    <title>Zimmerei Kohlhepp</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
    $(document).ready(function(){
        $('.menubutton').click(function() {
            $('nav').slideToggle('slow');
    });
    });
    </script>
<meta charset="UTF-8">
</head>


<body>
<div class="oben">
    <section id="menubar">
        <ul>
            <li>
                <a class="menubutton" href="#menu">
                <img src="Bilder/hamburger.png">
                </a>
            </li>


        </ul>


    </section>


    <header>
        <img src="Bilder/Logo.jpg">
        <h1>Zimmerei Kohlhepp</h1>
    </header>


    <nav class="nav">
        <ul>
            <li> 
                <a href="Index.html" class="active">Start</a>
                <a href="Ueber_uns.html" >Über uns</a>
                <a href="Leistungen.html" >Leistungen</a>
                <a href="Kontakt.html" >Kontakt</a>
            </li>
        </ul>
    </nav>


</div>






    <section id="main">


    <div class="braun">




    


        
                <h2>Herzlich Willkommen!</h2><section id= "banner">    
        <img class="Banner" src="Bilder/Banner.jpg">
    </section>


    <article>

                <img src="Bilder/Bild1.jpg"/>
        <div class="Schrift">
                <p > Starke Leistungen brauchen ein starkes Team! </p>
                <p>Vom Dachstuhl bis zum kompletten Haus können wir Ihnen alles im Bereich Holzbau bieten!</p>
                <p>Kontaktieren Sie uns und wir setzen Ihre Wünsche um!</p>
                <p>Wir freuen uns auf Sie! </p>




                


            </div>
        </article>


        <footer>
            <ul>
                <li><a href="Impressum.html" >Impressum</a></li>
            </ul>
        </footer>




    </section>


    </div>


        






</body>


</html>

Alles anzeigen

CSS:

Code

/*General Style*/




html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }


body{font-size: 100%;
        margin: 0em;
        padding: 0em;
    }


.braun {background: rgb(243,218,170);
        margin:auto;
        border-radius: 30px;
        max-width: 1200px;
        margin-top: 2em;
        margin-bottom: 5em; 
        padding-bottom: 2em;}


.oben {background: white;

        width: 100%;

        }


h1 {font-size: 2.75em;
line-height: 1.8em;
font-family: Lobster;
font-weight: 100;
margin: 0em;


display: inline-block;
}


h2 {font-size: 2em;
    line-height: 1.8em;
    font-family: Yanone Kaffeesatz;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0em;
    padding: 0em;
    padding-top: 0.5em;
    padding-left:1em;
    text-align: left;}


p {    
    text-align: center;
    font-size:1.5em;
    font-family: Yanone Kaffeesatz;
    font-weight: normal;
    text-align: left;
    display: inline-block;
    padding-left: 2.0em;
    padding-top: 0em;
}








ul {
    margin:0px;
    padding: 0px;
}


li {list-style: square;
    line-height: 1.25em;
    font-family: Yanone Kaffeesatz;
    font-weight: normal;
    margin: 0.313em 0em 0.313em 0em;
    padding: 0em;
    text-align: justify;}


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


a {text-decoration: none;}


/* On top Bar */


#menubar{
    display: block;
    background: white;
}


#menubar ul {
    display: block;
    width:2em;
    padding: 0em;
    padding-top:0.9em;
}


#menubar ul li {
    display: inline;
    line-height: 0.1em;
}


#menubar ul li a.menubutton {
    display: none;
}


#menubar ul li a img {width:100%;
padding-left: 2em;}






/*header*/




header {
    display: inline-block;
    background: white;
    padding-left: 6em;
    max-width: 40%;

}


header img {max-width: 8%;
            height: auto;
            padding-right: 1em;


        }


/* Navigation */


nav {
    display:block;
    background: white;
    text-align:center;


}


nav ul {
    display: block;
}


nav ul li {
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}


nav ul li a {
    color: black;
    font-size:1.5em;
    line-height: 2.5em;
    padding: 0.563em 0.938em 0.375em 0.983em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}


nav ul li a:hover { background: rgb(136,114,103);
                    border-bottom: 0.188em solid #3e322d; 
}


nav ul li a.active {border-bottom: 0.188em solid #3e322d;


}


/*Conten´t Area */


#main {
    display: block;
    width:96%;
    max-width: 1200px;
    margin: 0em auto;
    padding:0em;
}


#main article { display: inline-block;
        width: 100%;
        vertical-align: top;
        margin:0em;
        padding: 0em;
        }


#main article img {
    max-width: 400px;
    margin-top: 2em;
    border: 5px solid rgb(75,69,53);
    display: inline-block;
    text-align: center;
    margin-left: 2em;
}


.Schrift {display: inline-block;
            position: relative;
            max-width: 600px;
            padding-top: -10em;
            }




#banner {
display: block;
    width:100%;
    max-width: 1200px;
    margin: 0em auto;
    padding:0em;


}


#banner img {
    max-width: 1200px;
    width: 100%;
}


/* footer */


footer {
    display: block;
    text-align: right;
margin-top: 1em;
margin-bottom: -0.5em;
}


footer ul li { text-align: right;
                padding-right: 3em;
                list-style-type: none;


                }
footer ul li a { color: black;
padding: 0.2em;
border: 3px solid rgb(75,69,53);}


/* Mobile Ansicht */


@media screen and (max-width: 800px){
body { font-size: 90%;


}
}
@media screen and (max-width: 600px){
    #main article {
        width:100%;        
        display: block;
        margin: 0.625em 0em 0.625em 0em; }


    #main article img {
        margin-left: 1.3em;
        width: 220px;
    }


    .Schrift p {
            text-align: center;

            max-width: 250px;}
    .Schrift {margin-left: -1.9em;}


}




@media screen and (max-width: 550px) {
    nav.nav {display: block !important ;}


    body{font-size: 86%;}
    #menubar ul li a.menubutton {
        display: block;
    }


    nav { display: none;
        height: auto;}


nav ul li {display: block;
        margin: 0.3em 0em 0.3em 0em}
}

Alles anzeigen

Ich würd mich echt verdammt freuen, wenn jemand den Fehler findet!

Liebe Grüße

Sundream

Problem mit der Navigation in der mobilen Ansicht

Tags

Benutzer online in diesem Thema