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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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;
}