diff --git a/app/assets/stylesheets/_customizations.scss b/app/assets/stylesheets/_customizations.scss
index 4bb534f..6042c3c 100644
--- a/app/assets/stylesheets/_customizations.scss
+++ b/app/assets/stylesheets/_customizations.scss
@@ -21,8 +21,24 @@ main#main-container {
     flex: 1 0 auto;
 }
 
-.navbar {
-    height: 6em;
+.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 {
@@ -35,9 +51,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) %>