responsiv navbar

app/public/css/styles.css

@@ -1,5 +1,9 @@
 @import url(./trashcan.css);
 
+*{
+    box-sizing: border-box;
+}
+
 html { 
     background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed; 
     -webkit-background-size: cover;
@@ -9,29 +13,98 @@ html {
     height: 100%;
 }
 
-nav a{
-    float: right;
-    text-decoration: none;
-    color: #FFFFFF;
-    font-size: 18px;
-    padding: 15px 25px;
-    display: inline-block;
-    transition: all 0.5s ease 0s;
+.navbar {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #090CA9;
+    color: white;
 }
 
 #logo {
-    font-size: 20px;
-    text-transform: uppercase;
-    color: #FFFFFF;
-    font-weight: bold;
-    float: left;
-    padding: 20px;
-    margin-left: 0.5rem;
+    font-size: 1.5rem;
+    margin: .5rem;
+}
+
+.navbar-links {
+    height: 100%;
+}
+
+.navbar-links ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+.navbar-links li {
+    list-style: none;
+}
+
+.navbar-links li a {
+    display: block;
+    text-decoration: none;
+    color: white;
+    padding: 1rem;
+}
+
+.navbar-links li:hover {
+    background-color: #002e5b;
+}
+
+.toggle-button {
+    position: absolute;
+    top: .75rem;
+    right: .1rem;
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 21px;
+}
+
+.toggle-button .bar {
+    height: 3px;
+    width: 100%;
+    background-color: white;
+    border-radius: 10px;
+}
+
+
+@media (max-width: 800px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .toggle-button {
+        display: flex;
+    }
+
+    .navbar-links {
+        display: none;
+        width: 100%;
+    }
+
+    .navbar-links ul {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .navbar-links ul li {
+        text-align: end;
+    }
+
+    .navbar-links ul li a {
+        padding: .5rem 1rem;
+    }
+
+    .navbar-links.active {
+        display: flex;
+    }
 }
 
 header {
-    overflow: hidden;
-    background-color: #090CA9;
     margin-bottom: 5px;
 }
 
@@ -43,10 +116,6 @@ body {
     justify-content: center;
 }
 
-nav {
-    margin-right: 0.5rem;
-}
-
 h1 {
     margin: 0px auto;
     font-size: 26px;