Prevent logo and toggle icon in topbar from overlapping

projectblacklight · May 10, 2017 · 59ef967 · 59ef967
1 parent a9baa14
commit 59ef967
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/app/assets/stylesheets/blacklight/_header.scss b/app/assets/stylesheets/blacklight/_header.scss
@@ -2,6 +2,13 @@
   Header bar at top (Bootstrap nav-bar)
 */
 
+.topbar > .container {
+  @media (max-width: breakpoint-max(xs)) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 .navbar-brand {  /* The main logo image for the Blacklight instance */
   @if $logo-image {
     background: transparent $logo-image no-repeat top left;
@@ -46,6 +53,6 @@
     // hide 'search' label at very small screens
     @media screen and (max-width: breakpoint-max(xs)) {
       @include sr-only();
-    }    
+    }
   }
 }
diff --git a/app/views/shared/_header_navbar.html.erb b/app/views/shared/_header_navbar.html.erb
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" role="navigation">
+<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse topbar" role="navigation">
   <div class="<%= container_classes %>">
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>