Merge pull request #404 from binford2k/mobile_menu

use the unstyled menu list on mobile
voxpupuli · Dec 27, 2024 · 3496d4c · 3496d4c
2 parents 71dcb7c + 3b2b0a4
commit 3496d4c
Showing 1 changed file with 34 additions and 29 deletions.
diff --git a/static/css/site.css b/static/css/site.css
@@ -51,37 +51,42 @@ ul.docs-index li:hover {
   padding-top: 30px;
 }
 
-.navbar .submenu {
-  position: relative;
-  display: inline-block;
-  min-width: 8em;
-}
-  .navbar .submenu .nav-header {
+/* The unstyled list actually looks better on mobile. This width matches the
+   `navbar-expand-lg` parent class. If you change that, then change this to match.
+    See https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints
+ */
+@media (min-width: 991.98px) {
+  .navbar .submenu {
+    position: relative;
     display: inline-block;
-    padding: 0.5em;
-  }
-  .navbar .submenu .submenu-content {
-    display: none;
-    position: absolute;
-    z-index: 100;
-    background-color: #3d8bfd;
-    min-width: 15em;
-    padding-left: 0.25em;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  }
-  .navbar .submenu .submenu-content li {
-    list-style-type: none;
-  }
-  .navbar .submenu .submenu-content li i {
-    min-width: 1.25em;
+    min-width: 8em;
   }
-  .navbar .submenu:hover .submenu-content {
-    display: block;
-  }
-  .navbar .submenu:hover .nav-header {
-    background-color: #3d8bfd;
-  }
-
+    .navbar .submenu .nav-header {
+      display: inline-block;
+      padding: 0.5em;
+    }
+    .navbar .submenu .submenu-content {
+      display: none;
+      position: absolute;
+      z-index: 100;
+      background-color: #3d8bfd;
+      min-width: 15em;
+      padding-left: 0.25em;
+      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    }
+    .navbar .submenu .submenu-content li {
+      list-style-type: none;
+    }
+    .navbar .submenu .submenu-content li i {
+      min-width: 1.25em;
+    }
+    .navbar .submenu:hover .submenu-content {
+      display: block;
+    }
+    .navbar .submenu:hover .nav-header {
+      background-color: #3d8bfd;
+    }
+}
 
 div.mermaid {
   border: 1px solid #aaa;