fix: dropdowns broken in main menu

Also fixed dropdown style.

In order to fix, temporarily disabled horizontal scrolling of menu item overflow.

Fix 766c559
Fix #1425

assets/scss/academic/_nav.scss

@@ -47,17 +47,11 @@
   }
 
   .dropdown-menu {
-    font-size: .875rem;
+    font-size: #{$sta-font-size-small}px;
   }
 
   .dropdown-item.active {
-    font-weight: 500;
-    color: #2b2b2b;
-    background-color: transparent;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: .4rem .6rem;
-    background-size: .75rem .75rem;
+    font-weight: bold;
   }
 
 }
@@ -89,9 +83,14 @@
   }
 }
 
+// Allow user to horizontally scroll.
+// Commented out this feature as it causes dropdowns to appear within the menu bar.
+// TODO: re-enable in a way that doesn't break dropdowns.
+/*
 .navbar .collapse {
   overflow-x: auto;
 }
+*/
 
 .navbar-brand {
   padding-top: 0;

exampleSite/content/home/hero.md

@@ -26,7 +26,10 @@ hero_media = "hero-academic.png"
   # Background image.
   # image = ""  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
-
+  # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
+  # image_position = "center"  # Options include `left`, `center` (default), or `right`.
+  # image_parallax = true  # Use a fun parallax-like fixed background effect? true/false
+  
   # Text color (true=light or false=dark).
   text_color_light = true
 

layouts/partials/navbar.html

@@ -35,15 +35,13 @@
             {{- .Pre -}}<span>{{ .Name | safeHTML }}</span>{{- .Post -}}
             <span class="caret"></span>
           </a>
-          <ul class="dropdown-menu">
+          <div class="dropdown-menu">
             {{ range .Children }}
-            <li class="dropdown-item my-0 py-0 mx-0 px-0">
-              <a href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
+              <a class="dropdown-item" href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
                 {{- .Pre -}}<span>{{ .Name | safeHTML }}</span>{{- .Post -}}
               </a>
-            </li>
             {{ end }}
-          </ul>
+          </div>
         </li>
 
         {{ else }}