From 0ec26455e4cdf9224d16f08aa37c03236ae2adb6 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Mon, 17 Aug 2026 14:40:39 -0700
Subject: [PATCH 1/2] including top_nevbar component to make the toggle button
 work

---
 app/assets/stylesheets/_customizations.scss         |  8 ++++----
 .../blacklight/top_navbar_component.html.erb        | 12 ++++++++++++
 app/views/shared/_header_navbar.html.erb            | 13 +------------
 3 files changed, 17 insertions(+), 16 deletions(-)
 create mode 100644 app/components/blacklight/top_navbar_component.html.erb

diff --git a/app/assets/stylesheets/_customizations.scss b/app/assets/stylesheets/_customizations.scss
index 4bb534f..9f41b86 100644
--- a/app/assets/stylesheets/_customizations.scss
+++ b/app/assets/stylesheets/_customizations.scss
@@ -22,7 +22,7 @@ main#main-container {
 }
 
 .navbar {
-    height: 6em;
+    min-height: 6em;
 }
 
 .btn-primary {
@@ -35,9 +35,9 @@ main#main-container {
     color: $link-color;
 
     &:hover {
-            color: #004e9f;
-            text-decoration: underline;
-        }
+        color: #004e9f;
+        text-decoration: underline;
+    }
 }
 
 ul.facet-values {
diff --git a/app/components/blacklight/top_navbar_component.html.erb b/app/components/blacklight/top_navbar_component.html.erb
new file mode 100644
index 0000000..f25eba3
--- /dev/null
+++ b/app/components/blacklight/top_navbar_component.html.erb
@@ -0,0 +1,12 @@
+<nav class="navbar navbar-expand-md border-bottom topbar" aria-label="<%= aria_label %>">
+    <div class="container">
+        <%= link_to image_tag('geodata_logo_color.svg', alt: 'GeoData @ UC Berkeley'), blacklight_config.logo_link, class: 'navbar-brand' %>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse justify-content-md-end" id="user-util-collapse">
+            <%= render 'shared/user_util_links' %>
+        </div>
+    </div>
+</nav>
diff --git a/app/views/shared/_header_navbar.html.erb b/app/views/shared/_header_navbar.html.erb
index bdb57b8..d4ac052 100644
--- a/app/views/shared/_header_navbar.html.erb
+++ b/app/views/shared/_header_navbar.html.erb
@@ -1,14 +1,3 @@
-<nav class="navbar navbar-expand-md border-bottom topbar">
-    <div class="container">
-        <%= link_to (image_tag 'geodata_logo_color.svg', { :alt => 'GeoData @ UC Berkeley' }), root_path %>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse justify-content-md-end" id="user-util-collapse">
-            <%= render 'shared/user_util_links' %>
-        </div>
-    </div>
-</nav>
+<%= render Blacklight::TopNavbarComponent.new(blacklight_config: blacklight_config) %>
 
 <%= render Blacklight::SearchNavbarComponent.new(blacklight_config: blacklight_config) %>

From d0f12fe65006a39e9566bddfe7efe1beb5605496 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Tue, 18 Aug 2026 13:46:32 -0700
Subject: [PATCH 2/2] keep toggler button in the up-right corner

---
 app/assets/stylesheets/_customizations.scss | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/_customizations.scss b/app/assets/stylesheets/_customizations.scss
index 9f41b86..6042c3c 100644
--- a/app/assets/stylesheets/_customizations.scss
+++ b/app/assets/stylesheets/_customizations.scss
@@ -21,10 +21,26 @@ main#main-container {
     flex: 1 0 auto;
 }
 
-.navbar {
+.topbar {
     min-height: 6em;
 }
 
+@media (max-width: 768px) {
+    .topbar {
+        min-height: 0;
+    }
+
+    .topbar .navbar-brand {
+        max-width: calc(100% - 5rem);
+    }
+
+    .topbar .navbar-brand img {
+        display: block;
+        height: auto;
+        max-width: 100%;
+    }
+}
+
 .btn-primary {
     background-color: $link-color;
     color: #ffffff;