Update search.php

README.md

@@ -16,7 +16,6 @@
 
 ## Bekannte Fehler und Mängel
 - Bitte auf die gesetzten TODO's achten. Wenn Inhalte fehlen, sind sie i.d.R. als TODO kommentiert.
-- Die Navbar hat noch keine onHover-Effekte und erschwert etwas die Bedienung.
 - Suchleiste in der Nav ist in der mobilen Ansicht etwas schmal. Ggf. ein alternatives (kleineres) Logo implementieren.
 - Die Suchseite und Kategorieseite packen momentan alle passenden Beiträge untereinander. Später sollen zunächst 10 
   Ergebnisse auf einer Seite angezeigt werden.

css/navbar.css

@@ -57,6 +57,10 @@ CSS für die navbar
     font-weight: 600;
 }
 
+.nav__dropdown-menu a:hover {
+    color: #1d4ed8;
+}
+
 .nav__link {
     display: inline-block;
     font-weight: 600;
@@ -89,6 +93,12 @@ CSS für die navbar
     border-radius: 4px; /* Abgerundete Ecken */
     background: #fff;
     margin: 0 0.5rem;
+    width: 100%;
+}
+
+.nav__search input {
+    flex: 1;
+    width: 100%;
 }
 
 .nav__search-button {
@@ -115,6 +125,31 @@ CSS für die navbar
     display: block;
 }
 
+.nav__search-form {
+    display: flex;
+    width: 100%;
+    margin: 0;
+}
+
+.nav__search {
+    flex: 1;
+    width: 100%;
+}
+
+.nav__search-button {
+    display: inline-block;
+    background: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    margin-left: 4px;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
 /* Responsive Anpassung unter 1240px */
 @media (max-width: 1240px) {
     .nav {
@@ -189,24 +224,6 @@ CSS für die navbar
         cursor: pointer;
     }
 
-    .nav__search {
-        display: flex;
-        width: 100%;
-        margin: 0;
-    }
-
-    .nav__search-button {
-        display: inline-block;
-        background: #fff;
-        border: none;
-        border-radius: 4px;
-        padding: 0.4rem 0.6rem;
-        font-size: 0.8rem;
-        font-weight: 600;
-        cursor: pointer;
-        margin-left: 4px;
-    }
-
     .nav__search-button:hover {
         background-color: #f8f9fa;
     }

includes/search.php

@@ -2,7 +2,7 @@
 Suchleiste. Wird via PHP später in alle Seiten eingebunden
 -->
 <!--<label for="site-search">Suche</label>-->
-<form action="php/controller/search-results-controller.php" method="GET" class="search-form" style="display: flex; align-items: center; gap: 5px;">
+<form action="php/controller/search-results-controller.php" method="GET" class="nav__search-form">
     
     <input type="hidden" name="pfad" value="search-results">