topnav refactoring

pages/_includes/layout/menu.html

 {% assign current-page = page.menu | default: layout.menu | split: '.' %}
-<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
+<ul class="navbar-nav flex-wrap flex-fill{% if include.class %} {{ include.class }}{% endif %}">
 	{% for level-1 in site.data.menu %}
 	{% assign icon = level-1[1].icon %}
 

pages/_includes/layout/topnav.html

@@ -5,73 +5,74 @@
 {% assign fixed = page.topnav-fixed %}
 {% assign breakpoint = 'lg' %}
 
-<header class="navbar navbar-border {% if dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}">
-	<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
+{% unless page.hide-topnav %}
+<header class="navbar-wrap navbar-expand-lg flex-column{% if fixed %} fixed-top{% endif %}">
+	<div class="navbar navbar-border {% if page.topnav-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}">
+		<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
 
-		<button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false">
-			<span class="navbar-toggler-icon"></span>
-		</button>
+			<button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false">
+				<span class="navbar-toggler-icon"></span>
+			</button>
 
-		<a href="{{ site.base }}" class="navbar-brand hide-sidebar-visible m-0">
-			<img src="{{ site.base }}/static/logo{% if dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-logo">
-		</a>
+			<a href="{{ site.base }}" class="navbar-brand hide-sidebar-visible m-0">
+				<img src="{{ site.base }}/static/logo{% if dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-logo">
+			</a>
 
-		{% comment %}
-		{% if page.sidebar %}
-		{% include layout/navbar-search.html class="mr-4" %}
-		{% endif %}
-		{% endcomment %}
+			{% comment %}
+			{% if page.sidebar %}
+			{% include layout/navbar-search.html class="mr-4" %}
+			{% endif %}
+			{% endcomment %}
 
-		<ul class="nav navbar-menu align-items-center ml-auto">
-			<li class="nav-item d-none d-lg-flex mr-3">
-				{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" external=true %}
-			</li>
+			<ul class="nav navbar-menu align-items-center ml-auto">
+				<li class="nav-item d-none d-lg-flex mr-3">
+					{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" external=true %}
+				</li>
 
-			<li class="nav-item dropdown">
-				<a href="#" data-toggle="dropdown"
-				   class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
-					{% include ui/avatar.html src=person.photo size="sm" %}
-					<span class="ml-2 d-none d-lg-block lh-1">
+				<li class="nav-item dropdown">
+					<a href="#" data-toggle="dropdown"
+					   class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+						{% include ui/avatar.html src=person.photo size="sm" %}
+						<span class="ml-2 d-none d-lg-block lh-1">
 				{{ person.full_name }}
 				<span class="text-muted d-block mt-1 text-h6">Administrator</span>
 			</span>
-				</a>
-				<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-					<a class="dropdown-item" href="#">
-						{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
 					</a>
-					<a class="dropdown-item" href="#">
-						{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
-					</a>
-					<a class="dropdown-item" href="#">
-						{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
-						<span class="badge bg-primary ml-auto">6</span>
-					</a>
-					<a class="dropdown-item" href="#">
-						{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
-					</a>
-					<div class="dropdown-divider"></div>
-					<a class="dropdown-item" href="#">
-						{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
-					</a>
-					<a class="dropdown-item" href="#">
-						{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
-					</a>
-				</div>
-			</li>
-		</ul>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+						<a class="dropdown-item" href="#">
+							{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
+						</a>
+						<a class="dropdown-item" href="#">
+							{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
+						</a>
+						<a class="dropdown-item" href="#">
+							{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
+							<span class="badge bg-primary ml-auto">6</span>
+						</a>
+						<a class="dropdown-item" href="#">
+							{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
+						</a>
+						<div class="dropdown-divider"></div>
+						<a class="dropdown-item" href="#">
+							{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
+						</a>
+						<a class="dropdown-item" href="#">
+							{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
+						</a>
+					</div>
+				</li>
+			</ul>
+		</div>
 	</div>
-</header>
 
-{% unless page.sidebar %}
-<nav id="nav-main-menu" class="navbar navbar-border {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}{% if fixed %} fixed-top{% endif %}">
-	<div class="container{% if include.fluid %}-fluid{% endif %}">
-		<div class="collapse navbar-collapse">
-			{% include layout/menu.html top=true %}
-
-			{% include layout/navbar-search.html %}
+	{% unless page.sidebar %}
+	<div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}" id="nav-main-menu">
+		<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
+				{% include layout/menu.html top=true %}
+				{% include layout/navbar-search.html %}
 		</div>
 	</div>
-</nav>
-{% endunless %}
+	{% endunless %}
 
+</header>
+{% endunless %}
\ No newline at end of file

pages/layout-sidebar-only.html

@@ -2,6 +2,7 @@
 page-title: Page Layouts
 menu: layouts
 sidebar: true
+hide-topnav: true
 ---
 
 {% include layout/layouts.html %}

scss/_variables.scss

@@ -303,7 +303,7 @@ $modal-sm: 300px !default;
 
 //navbar
 $navbar-padding-y: .5rem !default;
-$navbar-height: 3.75rem !default;
+$navbar-height: 3.5rem !default;
 $navbar-border-color: $border-color !default;
 
 $navbar-toggler-padding-y: .75rem !default;

scss/layout/_layout.scss

@@ -150,91 +150,6 @@ $sidenav-folded-item-height: 3.5rem;
   }
 }
 
-
-/**
-Top nav
- */
-//.navbar-top {
-//  background-color: $navbar-bg;
-//  position: absolute;
-//  top: 0;
-//  right: 0;
-//  left: 0;
-//  z-index: $zindex-sticky;
-//  min-height: $navbar-height;
-//  box-shadow: inset 0 -1px 0 0px $navbar-border-color;
-//  user-select: none;
-//
-//  & + & {
-//    top: $navbar-height;
-//    z-index: $zindex-sticky - 1;
-//  }
-//
-//  & + & + & {
-//    top: $navbar-height * 2;
-//    z-index: $zindex-sticky - 2;
-//  }
-//
-//  @media print {
-//    display: none;
-//  }
-//
-//  .nav-link {
-//    height: $navbar-height;
-//  }
-//
-//  .nav-item {
-//    &.active {
-//      position: relative;
-//
-//      &:after {
-//        content: '';
-//        position: absolute;
-//        bottom: 0;
-//        left: 2px;
-//        right: 2px;
-//        border-bottom: 1px solid $primary;
-//      }
-//    }
-//  }
-//
-//  .navbar-brand-logo {
-//    &-sm {
-//      display: none;
-//    }
-//
-//    @include media-breakpoint-down($sidenav-breakpoint-show) {
-//      &-lg {
-//        display: none;
-//      }
-//
-//      &-sm {
-//        display: block;
-//      }
-//    }
-//  }
-//
-//  .sidebar + .content & {
-//    left: $sidenav-width;
-//
-//    @if $sidenav-breakpoint-folded {
-//      @include media-breakpoint-down($sidenav-breakpoint-folded) {
-//        left: $sidenav-width-narrow;
-//      }
-//    }
-//
-//    @include media-breakpoint-down($sidenav-breakpoint-show) {
-//      left: 0;
-//      padding: 0;
-//    }
-//  }
-//}
-//
-//.topnav-fixed {
-//  position: fixed;
-//  z-index: $zindex-fixed;
-//}
-
 /**
 Wrapper
  */
@@ -274,9 +189,9 @@ Content
   flex: 1;
   display: flex;
 
-  @include media-breakpoint-up(md) {
-    padding-left: $card-group-margin-sm;
-    padding-right: $card-group-margin-sm;
+  @include media-breakpoint-up($cards-grid-breakpoint) {
+    padding-left: $cards-grid-gap / 2;
+    padding-right: $cards-grid-gap / 2;
   }
 
   @media print {

scss/layout/_navbar.scss

@@ -2,22 +2,46 @@
 Navbar
  */
 .navbar {
-  min-height: $navbar-height;
 
-  &.fixed-top {
-    + .content-page {
-      padding-top: $navbar-height;
-    }
+  &, .navbar-dark {
+    min-height: $navbar-height;
+
+    &.fixed-top {
+      + .content-page {
+        padding-top: $navbar-height;
+      }
 
-    + .navbar:not(.fixed-top) {
-      margin-top: $navbar-height;
+      + .navbar:not(.fixed-top) {
+        margin-top: $navbar-height;
+      }
+
+      + .navbar.fixed-top {
+        top: $navbar-height;
+
+        + .content-page {
+          padding-top: $navbar-height * 2;
+        }
+      }
     }
+  }
 
-    + .navbar.fixed-top {
-      top: $navbar-height;
+  @include media-breakpoint-up($cards-grid-breakpoint) {
+    padding-left: $cards-grid-gap / 2;
+    padding-right: $cards-grid-gap / 2;
+  }
+}
 
-      + .content-page {
-        padding-top: $navbar-height * 2;
+.navbar-collapse-absolute {
+  @each $breakpoint, $width in $grid-breakpoints {
+    @at-root .navbar-expand-#{$breakpoint} & {
+      position: absolute;
+      background: inherit;
+      z-index: $zindex-sticky;
+      left: 0;
+      right: 0;
+
+      @include media-breakpoint-up($breakpoint) {
+        position: static;
       }
     }
   }
@@ -74,7 +98,7 @@ navbar toggler
     bottom: $navbar-toggler-item-spacing;
   }
 
-  .navbar-toggler.collapsed & {
+  .navbar-toggler[aria-expanded="true"] & {
     transform: rotate(45deg);
     transition: top $time, bottom $time, transform $time $time, opacity $time;
 
@@ -113,10 +137,29 @@ Navbar logo
     padding-right: $navbar-nav-link-padding-x;
   }
 
-  .nav-item:hover,
-  .dropright:hover {
-    > .dropdown-menu {
-      display: block;
+  @each $breakpoint, $width in $grid-breakpoints {
+    @at-root .navbar-expand-#{$breakpoint} & {
+      @include media-breakpoint-up($breakpoint) {
+        .nav-item:hover,
+        .dropright:hover {
+          > .dropdown-menu {
+            display: block;
+          }
+        }
+      }
+
+      @include media-breakpoint-down($breakpoint) {
+        .dropdown-menu {
+          box-shadow: none;
+          border: 0;
+          padding: 0;
+        }
+
+        .dropdown-item {
+          padding-left: add($navbar-nav-link-padding-x, 19px);
+          padding-right: 0;
+        }
+      }
     }
   }