fix: adjust nav item padding on smaller screen

techfromsage · May 19, 2021 · ca9c0ac · ca9c0ac
1 parent 9969da5
commit ca9c0ac
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -13,7 +13,7 @@
 .navbar-dark .navbar-nav .nav-link:hover,
 .navbar-dark .navbar-nav .nav-link:focus,
 .navbar-dark .navbar-brand:hover,
-.navbar-dark .navbar-brand:focus, {
+.navbar-dark .navbar-brand:focus {
   background-color: rgba(0, 0, 0, 0.25);
 }
 
@@ -35,7 +35,14 @@
 }
 
 .navbar-brand {
-  margin-inline-start: -.75rem;
-  padding-inline-start: .9375rem;
-  padding-inline-end: .9375rem;
+  margin-inline-start: -0.75rem;
+  padding-inline-start: 0.9375rem;
+  padding-inline-end: 0.9375rem;
+}
+
+@media (max-width: 992px) {
+  .navbar-nav .nav-link {
+    padding-inline-start: $spacer;
+    padding-inline-end: $spacer;
+  }
 }