From bf2aff1f7702c1a67ce6bc97111e058f3639bc0c Mon Sep 17 00:00:00 2001
From: NOrtmann1 <145041949+NOrtmann1@users.noreply.github.com>
Date: Mon, 11 May 2026 10:22:02 +0200
Subject: [PATCH] responisve navbar
---
css/navbar.css | 72 +++++++++++++++++++++++++++++----------------
includes/navbar.php | 9 ++++++
2 files changed, 55 insertions(+), 26 deletions(-)
diff --git a/css/navbar.css b/css/navbar.css
index add79ba..dc5990a 100644
--- a/css/navbar.css
+++ b/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/ */
-/*
-.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
-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,
+#mobile-nav { display: none; } /* Nicht im Desktop‑View */
-.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; }
-#mobile-nav { display:none; }
+@media (max-width: 48em) { /* ~768px */
+ /* 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; }
- .anchor-link, #mobile-nav { display: block; }
-
- ul.open {
- background-color: #F4F4F4;
- box-shadow: 2px 2px 3px #444444;
+ /* Mobile‑Nav‑Liste (der “off‑canvas”‑Menu) sichtbar */
+ .nav__mobile-menu {
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; }
- ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
- ul.open li a:hover { background-color: #ccc; color: #fff; }
+ .nav__mobile-menu li {
+ border-bottom: 1px solid #444;
+ }
+ .nav__mobile-menu a {
+ display: block;
+ color: #fff;
+ padding: 1rem;
+ text-decoration: none;
+ }
-}
-*/
\ No newline at end of file
+ /* Die “Profil / Anmelden / Registrieren”‑Buttons in einer Zeile */
+ .nav__right {
+ flex: 1;
+ justify-content: flex-end;
+ }
+ .nav__left {
+ flex: 1;
+ }
+}
\ No newline at end of file
diff --git a/includes/navbar.php b/includes/navbar.php
index 8d1a649..b9b7e3f 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -7,7 +7,16 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
+
+
+
+