fix: navbar logo is too big on Firefox

Fix #1449

assets/scss/academic/_nav.scss

@@ -13,6 +13,14 @@
   left: 0;
   z-index: 1030;
 
+  // Remove Bootstrap's navbar v-padding and assign v-padding to logo separately to maximise logo size.
+  // Otherwise, Bootstrap's navbar v-padding causes issue with logo fitting within fixed 50px height bar in md-lg sizes.
+  padding: 0 1rem;
+
+  .nav-item {
+    // For z-index compatibility with logo on mobile layout, otherwise nav-item can't be clicked when logo present.
+    position: relative;
+  }
   @include media-breakpoint-down(md) {
     height: 50px;
 
@@ -67,6 +75,8 @@
 // Remove Bootstrap's border from Toggle button.
 .navbar-toggler {
   border: 0 !important;
+  position: relative;  // For z-index clickable mobile logo.
+  z-index: 1030;
 }
 .navbar-toggler:focus,
 .navbar-toggler:active {
@@ -97,9 +107,12 @@
 */
 
 .navbar-brand {
-  padding-top: 0;
-  padding-bottom: 0;
+  // Set v-padding to 5px to align with 50/70px responsive max navbar heights.
+  padding-top: 5px;
+  padding-bottom: 5px;
   font-weight: bold;
+  position: relative;
+  z-index: 1030;  // For z-index clickable mobile logo.
 }
 
 // Dynamically fit logo image to space available.
@@ -111,6 +124,7 @@
   height: -webkit-fill-available;
   height: -webkit-stretch;
   height: stretch;
+  max-height: 60px;  // For lg+ responsive sizing. 60px height +10px v-padding = 70px
   max-width: fit-content;  // Must override default responsive image style.
 }
 
@@ -119,13 +133,18 @@
 }
 
 @include media-breakpoint-down(md) {
-  .navbar-brand {
-    max-width: fit-content;
-    margin: 0 auto;
+  // Used in conjunction with mobile .navbar-brand to center logo on mobile.
+  .navbar-brand-mobile-wrapper {
     position: absolute;
     left: 0;
     right: 0;
-    display: inline-block;
+  }
+  .navbar-brand {
+    // Center logo in mobile navbar.
+    margin: 0 auto;
+  }
+  .navbar-brand img {
+    max-height: 40px;  // 40px height + 10px v-padding = 50px.
   }
   .navbar-toggler {
     border-color: transparent;  // Remove Bootstrap's border from Toggle button.
@@ -135,7 +154,7 @@
     padding-left: 0;
   }
   .navbar-collapse {
-    z-index: 9999 !important;
+    z-index: 1031 !important;  // Appear just over navbar.
     position: absolute;
     left: 0;
     top: 50px;
@@ -174,6 +193,7 @@ ul.nav-icons li.nav-item a.nav-link {
 .dropdown-menu {
   background-color: $sta-menu-primary !important;
   color: $sta-menu-text !important;
+  z-index: 1032;  // I18n dropdown over mobile expanded menu.
 }
 
 .dropdown-item {

layouts/partials/navbar.html

@@ -1,10 +1,10 @@
 {{ $current_page := . }}
+{{ $show_logo := site.Params.main_menu.show_logo | default true }}
 <nav class="navbar navbar-expand-lg navbar-light compensate-for-scrollbar" id="navbar-main">
   <div class="container">
 
-    <!-- Brand and toggle get grouped for better mobile display -->
-    {{ $show_logo := site.Params.main_menu.show_logo | default true }}
     {{if $show_logo}}
+    <div class="d-none d-lg-inline-flex">
       <a class="navbar-brand" href="{{ "/" | relLangURL }}">
         {{- if site.Params.logo -}}
           <img src="{{ printf "/img/%s" site.Params.logo | relURL }}" alt="{{ site.Title }}">
@@ -12,6 +12,7 @@
           {{- site.Title -}}
         {{- end -}}
       </a>
+    </div>
     {{end}}
 
     {{ if site.Menus.main }}
@@ -21,6 +22,18 @@
     </button>
     {{ end }}
 
+    {{if $show_logo}}
+    <div class="navbar-brand-mobile-wrapper d-inline-flex d-lg-none">
+      <a class="navbar-brand" href="{{ "/" | relLangURL }}">
+      {{- if site.Params.logo -}}
+      <img src="{{ printf "/img/%s" site.Params.logo | relURL }}" alt="{{ site.Title }}">
+      {{- else -}}
+      {{- site.Title -}}
+      {{- end -}}
+      </a>
+    </div>
+    {{end}}
+
     <!-- Collect the nav links, forms, and other content for toggling -->
     {{ $align_menu := site.Params.main_menu.align | default "l" }}
     <div class="navbar-collapse main-menu-item collapse {{ if eq $align_menu "c" }}justify-content-center{{ else if eq $align_menu "r" }}justify-content-end{{else}}justify-content-start{{ end }}" id="navbar-content">