navbar fixes

pages/_includes/layout/navbar-secondary.html

@@ -2,7 +2,7 @@
 	<div class="container">
 		{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
 
-		<form class="form-inline w-50 mr-4 d-none d-md-flex">
+		<form class="form-inline w-50 mr-4 d-none d-md-flex ">
 			{% include ui/form/input-icon.html prepend=true input-class="form-control-flush w-100" class="w-100" %}
 		</form>
 
@@ -28,7 +28,7 @@
 			</li>
 
 			<li class="nav-item dropdown">
-				<a href="#" class="nav-link" data-toggle="dropdown">
+				<a href="#" class="nav-link px-0" data-toggle="dropdown">
 					{% include ui/icon.html icon="bell" %}
 				</a>
 				<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
@@ -36,7 +36,7 @@
 				</div>
 			</li>
 
-			<li class="nav-item dropdown pl-2">
+			<li class="nav-item dropdown pl-3">
 				<a href="#" class="nav-link d-flex lh-1 text-inherit p-0 text-left" data-toggle="dropdown">
 					{% include ui/avatar.html person-id=1 %}
 					<div class="d-none d-lg-block pl-2">

scss/layout/_navbar.scss

@@ -165,6 +165,7 @@ Vertical navbar
       height: 2.5rem;
       padding-left: $navbar-vertical-padding;
       padding-right: $navbar-vertical-padding;
+      justify-content: start;
     }
 
     .nav-item {
@@ -265,6 +266,7 @@ All navbars
   padding-top: 0;
   padding-bottom: 0;
   min-height: $navbar-height;
+  box-shadow: 0 0 0 1px $border-color;
 
   @media print {
     display: none;
@@ -288,14 +290,41 @@ All navbars
     margin-right: .5rem;
     line-height: .99;
   }
+
+  .navbar-nav {
+    align-items: center;
+
+    .nav-link {
+      color: inherit;
+      opacity: $text-muted-opacity;
+      transition: .3s opacity;
+      justify-content: center;
+
+      &:hover {
+        color: inherit;
+        opacity: 1;
+      }
+
+      &.disabled {
+        color: inherit;
+        opacity: $text-muted-opacity / 3;
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: inherit;
+      opacity: 1;
+    }
+  }
 }
 
 .navbar-expand {
   @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
     &-#{$breakpoint} {
       @include media-breakpoint-up($breakpoint) {
-
-
         .navbar-nav {
           margin-left: (-$navbar-nav-link-padding-x);
 
@@ -336,41 +365,6 @@ Navbar brand
   display: none;
 }
 
-/**
-Navbar colors
- */
-.navbar {
-  box-shadow: 0 0 0 1px $border-color;
-
-  .navbar-nav {
-    align-items: center;
-
-    .nav-link {
-      color: inherit;
-      opacity: $text-muted-opacity;
-      transition: .3s opacity;
-
-      &:hover {
-        color: inherit;
-        opacity: 1;
-      }
-
-      &.disabled {
-        color: inherit;
-        opacity: $text-muted-opacity / 3;
-      }
-    }
-
-    .show > .nav-link,
-    .active > .nav-link,
-    .nav-link.show,
-    .nav-link.active {
-      color: inherit;
-      opacity: 1;
-    }
-  }
-}
-
 .navbar-light {
   background: $white;
   @include scrollbar;