top menu

_config.yml

@@ -52,6 +52,7 @@ defaults:
       type: docs
     values:
       layout: docs
+      nav-position: top
 
 
 colors:

pages/_includes/layout/menu.html

@@ -9,14 +9,16 @@
          <span class="nav-link-title">
             {{ level-1[1].title }}
 
+            {% unless include.top %}
             {% if level-1[1].label %}
             <span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
             {% endif %}
+            {% endunless %}
          </span>
       </a>
       {% if level-1[1].children or level-1[1].docs %}
-      <div class="collapse navbar-collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}">
-         <ul class="nav nav-sm flex-column">
+      <div class="collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}">
+         <ul class="nav">
 
             {% if level-1[1].docs %}
             {% for d in site.data.docs %}
@@ -48,7 +50,7 @@
                   </span>
                </a>
                {% if level-2[1].children %}
-               <div class="collapse navbar-collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}">
+               <div class="collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}">
                   <ul class="nav nav-sm flex-column">
                      {% for level-3 in level-2[1].children %}
                      <li class="nav-item">
@@ -62,7 +64,7 @@
                         </a>
 
                         {% if level-3[1].children %}
-                        <div class="collapse navbar-collapse{% if level-3[0] == current-page[2] %} show{% endif %}" id="sidebar-{{ level-3[0] }}">
+                        <div class="collapse{% if level-3[0] == current-page[2] %} show{% endif %}" id="sidebar-{{ level-3[0] }}">
                            <ul class="nav nav-sm flex-column">
                               {% for level-4 in level-3[1].children %}
                               <li class="nav-item">

pages/_includes/layout/topnav.html

@@ -2,12 +2,10 @@
    {% include parts/navbar.html logo=true search=true user-menu=1 person=5 white-logo=include.dark %}
 </header>
 
-{% comment %}
 {% if page.nav-position == "top" or page.nav-position == "all" %}
 <header class="navbar navbar-expand-md">
 	<div class="container">
-      {% include layout/menu.html %}
+      {% include layout/menu.html top=true %}
 	</div>
 </header>
 {% endif %}
-{% endcomment %}

pages/_layouts/error.html

@@ -8,13 +8,13 @@ body-class: border-top-2 border-primary
 	<div class="text-center p-4">
 
 		{% if page.error == 'maintenance' %}
-			<div class="display-3 text-muted mb-3">{% include ui/icon.html icon="settings" class="icon-thin" %}</div>
+			<div class="display-2 text-muted mb-3">{% include ui/icon.html icon="settings" class="icon-thin" %}</div>
 			<h1 class="h2 mb-3">{{ error }}</h1>
 			<p class="h4 text-muted font-weight-normal mb-5">We’ll be back shortly!</p>
 		{% else %}
-			<div class="display-3 text-muted mb-3">{{ page.error }}</div>
+			<div class="display-2 text-muted mb-3">{{ page.error }}</div>
 
-			<h1 class="h2 mb-3 font-weight-bolder">Oops&hellip; You just found an error page 😭</h1>
+			<h1 class="h2 mb-3">Oops&hellip; You just found an error page 😭</h1>
 			<p class="h4 text-muted font-weight-normal mb-5">{{ error }}</p>
 
 			<a class="btn btn-primary" href="javascript:history.back()">

pages/badges.html

----
-title: Badges
-page-title: Badges
-done: true
----
-
-<div class="row">
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<div class="card-title">Standard badges</div>
-			</div>
-			<div class="card-body">
-				<p>
-					{% for variant in site.variants %}
-					<span class="badge badge-{{ variant }}">{{ variant }}</span>
-					{% endfor %}
-				</p>
-				<p>
-					{% for color in site.colors %}
-					<span class="badge badge-{{ color[0] }}">{{ color[0] }}</span>
-					{% endfor %}
-				</p>
-			</div>
-		</div>
-	</div>
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<div class="card-title">Light badges</div>
-			</div>
-			<div class="card-body">
-				<p>
-					{% for variant in site.variants %}
-					<span class="badge badge-{{ variant }}-lt">{{ variant }}</span>
-					{% endfor %}
-				</p>
-				<p>
-					{% for color in site.colors %}
-					<span class="badge badge-{{ color[0] }}-lt">{{ color[0] }}</span>
-					{% endfor %}
-				</p>
-			</div>
-		</div>
-	</div>
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<div class="card-title">Bordered badges</div>
-			</div>
-			<div class="card-body">
-				<p>
-					{% for variant in site.variants %}
-					<span class="badge badge-{{ variant }} badge-outline">{{ variant }}</span>
-					{% endfor %}
-				</p>
-				<p>
-					{% for color in site.colors %}
-					<span class="badge badge-{{ color[0] }} badge-outline">{{ color[0] }}</span>
-					{% endfor %}
-				</p>
-			</div>
-		</div>
-	</div>
-</div>

scss/_variables.scss

@@ -241,6 +241,8 @@ $sidenav-border-color: $border-color !default;
 $sidenav-dark-bg: $dark !default;
 $sidenav-link-padding-x: .75rem !default;
 
+$navbar-nav-link-padding-x: .75rem !default;
+
 //steps
 $steps-border-width: 2px !default;
 $steps-color-inactive: #f3f5f5 !default;

scss/layout/_navbar.scss

+
 .navbar {
   background: #fff;
   color: $body-color;
@@ -10,11 +11,26 @@
   .nav-link {
     color: inherit;
     white-space: nowrap;
+
+    .icon {
+      font-size: 0.875rem;
+      vertical-align: top;
+    }
   }
 }
 
 .navbar-nav {
   flex-direction: row;
+  margin: 0 (-$navbar-nav-link-padding-x);
+
+  .nav-link {
+    color: $text-muted;
+    transition: .3s color;
+
+    &:hover {
+      color: $body-color;
+    }
+  }
 
   .navbar-nav {
     padding-left: .5rem;