responisve navbar

css/navbar.css

@@ -94,37 +94,57 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
 }
 
 /* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
-/*
+.anchor-link,
-.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
+#mobile-nav { display: none; }   /* Nicht im Desktop‑View */
-ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
-ul.simple-toggle li { display: inline-block; text-align: left; }
-ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
-ul.simple-toggle li a:hover { background-color: #ccc; }
 
-.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
+@media (max-width: 48em) { /* ~768px */
-#mobile-nav { display:none; }
+    /* Desktop‑Menü verstecken */
+    .nav__center { display: none; }
 
-@media (max-width:48.000em){
+    /* Hamburger‑Button sichtbar */
+    #mobile-nav,
+    .anchor-link { display: block; }
 
-    ul.simple-toggle { display: none; }
+    /* Mobile‑Nav‑Liste (der “off‑canvas”‑Menu) sichtbar */
-    .anchor-link, #mobile-nav { display: block; }
+    .nav__mobile-menu {
-
-    ul.open {
-        background-color: #F4F4F4;
-        box-shadow: 2px 2px 3px #444444;
         display: block;
-        list-style: none outside none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #333d43;
+        z-index: 999;                 /* über allem anderen */
+        max-height: 0;                /* verstecken */
+        overflow: hidden;
+        transition: max-height 0.3s ease-out;
+    }
+    .nav__mobile-menu.open {
+        max-height: 100vh;            /* 100% viewport‑height */
+        overflow-y: auto;             /* Scrollen, falls zu viele Links */
+    }
+
+    /* Mobile‑Links */
+    .nav__mobile-menu ul {
+        list-style: none;
         margin: 0;
         padding: 0;
-        position: absolute;
-        right: 5px;
-        top: 100%;
-        width: 70%;
-        z-index: 500;
     }
-    ul.open li { display: block; list-style: none; text-align: center; }
+    .nav__mobile-menu li {
-    ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
+        border-bottom: 1px solid #444;
-    ul.open li a:hover { background-color: #ccc; color: #fff; }
+    }
+    .nav__mobile-menu a {
+        display: block;
+        color: #fff;
+        padding: 1rem;
+        text-decoration: none;
+    }
 
-}
+    /* Die “Profil / Anmelden / Registrieren”‑Buttons in einer Zeile */
-*/
+    .nav__right {
+        flex: 1;
+        justify-content: flex-end;
+    }
+    .nav__left {
+        flex: 1;
+    }
+}

includes/navbar.php

@@ -7,7 +7,16 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
 	        <img src="images/logos/logo_full.png" alt="Logo" style="height: 50px">
 	    </a>
     </div>
+    <!-- Mobile navbar mit Burger-Symbol -->
+    <button id="mobile-nav" class="anchor-link" aria-label="Menü öffnen">
+        ☰
+    </button>
+    <ul id="mobile-menu" class="nav__mobile-menu">
+        <li class="nav__item"><a href="content/mathe.php">Mathe</a></li>
+        <li class="nav__item"><a href="content/physik.php">Physik</a></li>
+    </ul>
 
+    <!-- normale Navbar (Desktop) -->
     <div class="nav__center">
         <div class="nav__item nav__dropdown">
             <button class="nav__dropdown-toggle">Sprachen</button>