Menübutton erscheint nicht bei Mobiler ansicht
Hi,
ich habe mir eine One-Page-Website programmiert. Auch Responsiv für Mobiltelefone und Tablets gemacht. Bei einer bestimmten Pixelgröße soll die Navigationsleiste verschwinden und ein Button angezeigt werden. Eigentlich müsste meine Programmierung (auch mit einem kleinem JS) funktionieren. Jedoch tut es das nicht und ich finde den Fehler nicht. :-(
Könnt ihr hier mal drüberschauen und mir helfen? Wäre mir eine große Hilfe! Danke.
Der hier verwendete Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gabriel Kumar | Wilkommen</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<style>
html, body {margin: 0; padding: 0; height: 100%; text-align: center;}
section {min-height: 100%}
a {text-decoration: none}
li {list-style-type: none;}
h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500; color: #494949; text-transform: uppercase;}
h2 {color: #5d7177;}
h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px;}
h4, p {font-family: 'Roboto Slab', serif; color: #494949;}
hr {width: 30px; height: 3px; background: #494949; border: 0; margin: 0 auto 40px auto;}
#logo, li, img, .button, .fa-bars {transition: all 300ms; -webkit-transistation: all 300ms; -moz-transition: all 300ms; -o-transistation: all 300ms;}
.fa-bars {display: none;}
/* HEADER *************/
header {
width: 100%;
height: 65px;
position: fixed;
top: 0;
left: 0;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 1;
}
#logo {
width: 140px;
float: left;
margin: 10px 0 0 50px;
}
#logo:hover {
opacity: 0.5;
}
#logo img {
width: 100%;
}
header nav {
float: right;
margin: 10px 50px 0 0;
}
header nav ul li {
float: left;
margin-left: 25px;
}
header nav ul li a {
font-size: 16px;
}
header nav ul li:hover {
padding-top: 5px;
}
i.fa-bars{
display:none;
}
/* HOME ***********/
/*x
x
x
x
[Hier steht noch mehr aber sonst würde das Limit hier überschritten werden]
x
x
x
x*/
/* MEDIA QUERIES ******/
/* TABLETS ***********/
@media screen and (max-width: 1024px) {
header {
height: auto;
}
#logo {
width: 100px;
margin-top: 5px;
}
header nav {
margin-top: 0;
}
header nav ul{
display:none;
}
header nav ul li {
font-size: 12px;
}
#home h1 {
font-size: 90px;
margin-top: 200px;
}
#home h2 {
font-size: 22px;
}
h3 {
padding-top: 12%;
}
p {
width: 80%
}
#projects {
width: auto;
}
#projects ul li {
width: 100%;
float: none;
}
#projects ul li:last-child {
padding-bottom: 20%;
}
#projects img {
width: 55%;
height: auto;
}
form input, form textarea {
width: 60%;
}
.button {
width: 62%;
}
i.fa-bars{
display:block;
}
}
/* MOBILES ********/
@media screen and (max-width: 480px) {
#logo {
width: 90px;
margin-left: 30px;
}
header nav {
margin: 0;
display:none;
}
.fa-bars {
font-size: 17px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: -25px 30px 0 0;
color: white;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 11px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
#home h1 {
font-size: 60px;
margin-top: 200px;
}
#home h2 {
width: 70%;
height: auto;
}
#projects img {
width: 70%;
height: auto;
}
form input, form textarea {
width: 70%;
}
.button {
width: 72%;
}
i.fa-bars{
display:block;
}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<!-- HEADER ---->
<header>
<div id="logo">
<a href="#">
LOGO
</a>
</div>
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<a href="#home"><li>Home</li></a>
<a href="#about"><li>Über</li></a>
<a href="#it"><li>IT</li></a>
<a href="#grafikdesign"><li>Grafikdesign</li></a>
<a href="#more"><li>More</li></a>
<a href="#kontakt"><li>Kontakt</li></a>
</ul>
</nav>
</header>
<!-- HOME ---->
<section id="home">
<hr>
<h1>Gabriel Kumar</h1>
<h2>IT, Grafikdesign & More</h2>
<a href="#about">
</a>
</section>
<!-- ABOUT ----------->
<section id="about">
<h3>Über</h3>
<hr>
<h4>Gabriel Kumar</h4>
<p>blalblabla</p>
</section>
<!-- IT --------------->
<section id="it">
<h3>IT</h3>
<hr>
<div id="projects">
<ul>
<li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
<li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
<li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
<li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
<li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
<li><a href="#"><img src="http://via.placeholder.com/1280x720" alt="Platzhalter"></a></li>
</ul>
</div>
</section>
<!-- GRAFIKDESIGN ------------->
<section id="grafikdesign">
<h3>Grafikdesign</h3>
<hr>
<p>blablabla</p>
</section>
<!-- MORE ------------------->
<section id="more">
<h3>More</h3>
<hr>
<p>blablabla</p>
</section>
<!-- KONTAKT -------------->
<section id="kontakt">
<h3>Kontakt</h3>
<hr>
<form>
<input type="email" tabindex="1" placeholder="E-Mail"><br>
<input type="text" tabindex="2" placeholder="Betreff"><br>
<textarea tabindex="3" placeholder="Nachricht"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<!-- FOOTER --------->
<footer>
<p>
© 2018 Gabriel Kumar | Made with ♥ by Gabriel Kumar
</p>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(".fa-bars").click(function() {
$("header nav ul").toggle();
});
</script>
</body>
</html>