Adjust navbar

Author: jochenklar

src/terms/static/css/style.css

@@ -32,26 +32,23 @@ nav.navbar {
     --bs-navbar-brand-color: var(--bs-navbar-color);
     --bs-navbar-brand-hover-color: var(--bs-navbar-hover-color);
 
-    background-color: var(--rdmo-color);
+    --bs-navbar-toggler-border-color: var(--rdmo-color-brand);
 
-    .container-fluid {
-        @media only screen and (min-width: $grid-breakpoint-md) {
-            padding-left: 3rem;
-            padding-right: 3rem;
-        }
-    }
+    background-color: var(--rdmo-color);
+}
 
-    .dropdown-menu {
-        --bs-nav-link-color: var(--rdmo-color-link);
-        --bs-nav-link-hover-color: var(--rdmo-color-link-hover);
-        --bs-nav-link-active-color: var(--rdmo-color-link);
+nav.navbar .filter-form {
+    flex-grow: 1;
 
-        .nav-item:hover {
-            background-color: var(--rdmo-color-bg);
-        }
+    @media only screen and (min-width: 992px) {
+        max-width: 40%;
     }
 }
 
+.navbar-toggler-icon {
+    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
 main {
     margin-top: 6rem;
     margin-bottom: 6rem;

src/terms/templates/_nav.html

@@ -8,7 +8,7 @@
         </button>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav mb-2 mb-lg-0 mr-5">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0 mr-5">
                 <li class="nav-item">
                     <a class="nav-link" href="{{ base_url }}questions/">Questions</a>
                 </li>
@@ -28,8 +28,7 @@
                     <a class="nav-link" href="{{ base_url }}views/">Views</a>
                 </li>
             </ul>
-            <span class="navbar-text px-5">&nbsp;</span>
-            <form class="flex-grow-1" role="filter">
+            <form class="filter-form" role="filter">
                 <input class="form-control" type="filter" id="filter" placeholder="Filter" />
             </form>
         </div>