diff --git a/_config.yml b/_config.yml
index 6f184817e..12ecaabe6 100644
--- a/_config.yml
+++ b/_config.yml
@@ -46,6 +46,7 @@ defaults:
       type: pages
     values:
       layout: default
+      nav-position: top
   -
     scope:
       type: docs
diff --git a/package.json b/package.json
index 8817f2655..c9cda9b63 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "npm-run-all lint html-build css-compile js-compile",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
-    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
+    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build",
     "lint": "npm-run-all --parallel js-lint css-lint",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index e87f87ff1..d9387751e 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -8,15 +8,29 @@ level-1:
   children:
     level-2:
       title: Level 2
-      icon: menu
       children:
         level-3:
           title: Level 3
-          icon: menu
           children:
             level-4:
               title: Level 4
-              icon: menu
+layout:
+  title: Layout
+  icon: layout
+  children:
+    sidebar-left:
+      title: Left sidebar
+      url: navbar-left.html
+    sidebar-right:
+      title: Right sidebar
+      url: navbar-right.html
+    navbar-top:
+      title: Navbar top
+      url: navbar-top.html
+    header-dark:
+      title: Dark header
+      url: header-dark.html
+
 docs:
   title: Documentation
   icon: file-text
diff --git a/pages/_includes/layout/header.html b/pages/_includes/layout/header.html
index dfb5c25ed..eeadc01e3 100644
--- a/pages/_includes/layout/header.html
+++ b/pages/_includes/layout/header.html
@@ -1,3 +1,3 @@
-<header class="header">
-   {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false %}
+<header class="header{% if include.dark %} bg-dark text-white{% endif %}">
+   {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
 </header>
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index 8817d503a..5bb78694b 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -1,4 +1,4 @@
-<ul class="navbar-nav mb-md-4">
+<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = include.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}
diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html
index f6a0a6781..6dc0d9886 100644
--- a/pages/_includes/layout/sidenav-content.html
+++ b/pages/_includes/layout/sidenav-content.html
@@ -10,4 +10,4 @@
    Docs
 </h6>
 
-{% include layout/menu.html menu=include.menu %}
+{% include layout/menu.html menu=include.menu class="mb-md-4" %}
diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html
index 158eb1d00..32998ffe9 100644
--- a/pages/_includes/layout/sidenav.html
+++ b/pages/_includes/layout/sidenav.html
@@ -1,4 +1,4 @@
 {% assign menu = page.menu | default: layout.menu %}
-<div class="sidenav sidenav-dark sidenav-expand-md">
+<div class="sidenav sidenav-dark{% if page.nav-position == "right" %} sidenav-right{% endif %} sidenav-expand-md">
    {% include layout/sidenav-content.html white=true menu=menu %}
 </div>
diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html
index 847f2ccdf..09963cf5e 100644
--- a/pages/_includes/layout/topnav.html
+++ b/pages/_includes/layout/topnav.html
@@ -1,9 +1,5 @@
 <div class="topnav">
-	<div class="container-fluid">
-		<nav class="navbar navbar-expand-lg topnav-menu">
-			<div class="navbar-collapse active collapse show" id="topnav-menu-content" style="">
-				{% include layout/menu.html %}
-			</div>
-		</nav>
+	<div class="container">
+      {% include layout/menu.html %}
 	</div>
 </div>
diff --git a/pages/_includes/parts/navbar.html b/pages/_includes/parts/navbar.html
index 11169b033..806244dfb 100644
--- a/pages/_includes/parts/navbar.html
+++ b/pages/_includes/parts/navbar.html
@@ -2,233 +2,231 @@
 {% assign person = site.data.people | where: "id", include.person %}
 {% assign person = person[0] %}
 
-<div class="navbar navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}">
-   <div class="container{% if include.fluid %}-fluid{% endif %}">
-      <a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
-         {% include ui/icon.html icon="menu" %}
-      </a>
+<div class="navbar container{% if include.fluid %}-fluid{% endif %} navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}">
+   <a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
+      {% include ui/icon.html icon="menu" %}
+   </a>
 
 
-      <a href="{{ site.base }}" class="navbar-brand text-inherit">
-         {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
-         {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-         {% if include.logo %}<img src="{{ site.base }}/img/logo.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
-         {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
-      </a>
+   <a href="{{ site.base }}" class="navbar-brand text-inherit">
+      {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
+      {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
+      {% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
+      {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
+   </a>
 
-      {% if include.plus-left %}
-      <a href="#" class="btn btn-primary">
-         {% include ui/icon.html icon="plus" %}
-      </a>
+   {% if include.plus-left %}
+   <a href="#" class="btn btn-primary">
+      {% include ui/icon.html icon="plus" %}
+   </a>
+   {% endif %}
+
+
+   <div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
+      {% if include.big-menu %}
+      <ul class="navbar-nav">
+         <li class="nav-item">
+            <a class="nav-link" href="#">Homepage</a>
+         </li>
+
+         <li class="nav-item dropdown">
+            <div class="dropdown">
+               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
+               <div class="dropdown-menu">
+                  <a class="dropdown-item" href="##">App Pages</a>
+                  <a class="dropdown-item" href="#">Utility Pages</a>
+                  <a class="dropdown-item" href="#">Layouts</a>
+               </div>
+            </div>
+         </li>
+
+         <li class="nav-item">
+            <div class="dropdown">
+               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
+               <div class="dropdown-menu">
+                  <a class="dropdown-item" href="#">Bootstrap</a>
+                  <a class="dropdown-item" href="#">Pipeline</a>
+               </div>
+            </div>
+         </li>
+
+         <li class="nav-item">
+            <a class="nav-link" href="#">Documentation</a>
+         </li>
+
+         <li class="nav-item">
+            <a class="nav-link" href="#">Changelog</a>
+         </li>
+      </ul>
+      {% endif %}
+
+      {% if include.search %}
+      <!-- Navbar Search -->
+      <form class="input-group m-2 my-lg-0 ">
+                <span class="input-group-prepend">
+                    <button type="button"
+                            class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
+                </span>
+         <input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
+                data-plugin="typeahead">
+      </form>
+      {% endif %}
+   </div>
+
+   <ul class="nav navbar-menu order-1 order-lg-2">
+      {% if include.fullscreen %}
+      <li class="nav-item d-none d-sm-block">
+         <a class="nav-link px-2" data-toggle="fullscreen" data-title="Fullscreen">
+            {% include ui/icon.html icon="maximize" %}
+         </a>
+      </li>
+      {% endif %}
+
+      {% if include.customize %}
+      <li class="nav-item dropdown">
+         <a class="nav-link px-2" data-toggle="dropdown">
+            {% include ui/icon.html icon="droplet" %}
+            <span class="badge badge-pill badge-up bg-success"></span>
+         </a>
+      </li>
+      {% endif %}
+
+      {% if include.notifications %}
+      <!-- Notification -->
+      <li class="nav-item dropdown">
+         <a class="nav-link px-2" data-toggle="dropdown">
+            {% include ui/icon.html icon="bell" %}
+            <span class="badge badge-pill badge-up bg-primary">4</span>
+         </a>
+         <div class="dropdown-menu dropdown-menu-right mt-3 p-0">
+            <div class="scrollable">
+               <div class="list list-row">
+               </div>
+            </div>
+            <div class="d-flex px-3 py-2 b-t">
+               <div class="flex">
+                  <span>6 Notifications</span>
+               </div>
+               <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
+            </div>
+         </div>
+      </li>
+      {% endif %}
+
+      {% if include.progress %}
+      <li class="nav-item">
+         <a href="#" class="nav-link text-muted-light">
+            Profile Completeness: 70%
+            <!--<span class="progress progress-xs">-->
+            <!--<span class="progress-bar" style="width: 70%"></span>-->
+            <!--</span>-->
+         </a>
+      </li>
+      {% endif %}
+
+      {% if include.user-menu %}
+      <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-color ml-2">
+            {% if include.user-menu == 1 %}
+               {% include ui/avatar.html src=person.photo %}
+               <span class="ml-2 d-none d-lg-block leading-none">
+                  <span>{{ person.full_name }}</span>
+                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+               </span>
+            {% elsif include.user-menu == 2 %}
+            <span class="mx-2 d-none leading-none d-lg-block text-right">
+                    <span class="text-default">{{ person.full_name }}</span>
+                </span>
+            {% include ui/avatar.html src=person.photo %}
+            {% elsif include.user-menu == 3 %}
+            {% include ui/avatar.html src=person.photo %}
+            {% elsif include.user-menu == 4 %}
+            <span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
+            {% endif %}
+         </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="#">
+               <span class="float-right"><span class="badge badge-primary">6</span></span>
+               {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
+            </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>
+      {% endif %}
+
+      {% if include.manage %}
+      <li class="nav-item">
+         <a href="#" class="btn btn-secondary">Manage Widgets</a>
+      </li>
+      {% endif %}
+
+      {% if include.register %}
+      <li class="nav-item ">
+         <a href="#" class="nav-link">
+            Sign in
+         </a>
+      </li>
+      <li class="d-flex align-items-center">
+         <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
+            Register
+         </a>
+      </li>
+      {% endif %}
+
+      {% if include.plus %}
+      <li class="nav-item">
+         <a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
+      </li>
+      {% endif %}
+
+      {% if include.premium %}
+      <li class="nav-item">
+         <a href="#" class="btn btn-success">Go Premium</a>
+      </li>
+      {% endif %}
+
+      {% if include.sync %}
+      <li class="nav-item">
+         <a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
+      </li>
+      {% endif %}
+
+      {% if include.language %}
+      <li class="nav-item dropdown">
+         <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+            <span class="flag flag-gb mr-2"></span>English
+         </a>
+         <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
+            {% for language in site.data.languages %}
+            <a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
+               language.name }}</a>
+            {% endfor %}
+         </div>
+      </li>
       {% endif %}
 
 
-      <div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
-         {% if include.big-menu %}
-         <ul class="navbar-nav">
-            <li class="nav-item">
-               <a class="nav-link" href="#">Homepage</a>
-            </li>
-
-            <li class="nav-item dropdown">
-               <div class="dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
-                  <div class="dropdown-menu">
-                     <a class="dropdown-item" href="##">App Pages</a>
-                     <a class="dropdown-item" href="#">Utility Pages</a>
-                     <a class="dropdown-item" href="#">Layouts</a>
-                  </div>
-               </div>
-            </li>
-
-            <li class="nav-item">
-               <div class="dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
-                  <div class="dropdown-menu">
-                     <a class="dropdown-item" href="#">Bootstrap</a>
-                     <a class="dropdown-item" href="#">Pipeline</a>
-                  </div>
-               </div>
-            </li>
-
-            <li class="nav-item">
-               <a class="nav-link" href="#">Documentation</a>
-            </li>
-
-            <li class="nav-item">
-               <a class="nav-link" href="#">Changelog</a>
-            </li>
-         </ul>
-         {% endif %}
-
-         {% if include.search %}
-         <!-- Navbar Search -->
-         <form class="input-group m-2 my-lg-0 ">
-                   <span class="input-group-prepend">
-                       <button type="button"
-                               class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
-                   </span>
-            <input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
-                   data-plugin="typeahead">
-         </form>
-         {% endif %}
-      </div>
-
-      <ul class="nav navbar-menu order-1 order-lg-2">
-         {% if include.fullscreen %}
-         <li class="nav-item d-none d-sm-block">
-            <a class="nav-link px-2" data-toggle="fullscreen" data-title="Fullscreen">
-               {% include ui/icon.html icon="maximize" %}
-            </a>
-         </li>
-         {% endif %}
-
-         {% if include.customize %}
-         <li class="nav-item dropdown">
-            <a class="nav-link px-2" data-toggle="dropdown">
-               {% include ui/icon.html icon="droplet" %}
-               <span class="badge badge-pill badge-up bg-success"></span>
-            </a>
-         </li>
-         {% endif %}
-
-         {% if include.notifications %}
-         <!-- Notification -->
-         <li class="nav-item dropdown">
-            <a class="nav-link px-2" data-toggle="dropdown">
-               {% include ui/icon.html icon="bell" %}
-               <span class="badge badge-pill badge-up bg-primary">4</span>
-            </a>
-            <div class="dropdown-menu dropdown-menu-right mt-3 p-0">
-               <div class="scrollable">
-                  <div class="list list-row">
-                  </div>
-               </div>
-               <div class="d-flex px-3 py-2 b-t">
-                  <div class="flex">
-                     <span>6 Notifications</span>
-                  </div>
-                  <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-               </div>
-            </div>
-         </li>
-         {% endif %}
-
-         {% if include.progress %}
-         <li class="nav-item">
-            <a href="#" class="nav-link text-muted-light">
-               Profile Completeness: 70%
-               <!--<span class="progress progress-xs">-->
-               <!--<span class="progress-bar" style="width: 70%"></span>-->
-               <!--</span>-->
-            </a>
-         </li>
-         {% endif %}
-
-         {% if include.user-menu %}
-         <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-color ml-2">
-               {% if include.user-menu == 1 %}
-                  {% include ui/avatar.html src=person.photo %}
-                  <span class="ml-2 d-none d-lg-block leading-none">
-                     <span>{{ person.full_name }}</span>
-                     <span class="text-muted d-block mt-1 text-h6">Administrator</span>
-                  </span>
-               {% elsif include.user-menu == 2 %}
-               <span class="mx-2 d-none leading-none d-lg-block text-right">
-                       <span class="text-default">{{ person.full_name }}</span>
-                   </span>
-               {% include ui/avatar.html src=person.photo %}
-               {% elsif include.user-menu == 3 %}
-               {% include ui/avatar.html src=person.photo %}
-               {% elsif include.user-menu == 4 %}
-               <span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
-               {% endif %}
-            </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="#">
-                  <span class="float-right"><span class="badge badge-primary">6</span></span>
-                  {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
-               </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>
-         {% endif %}
-
-         {% if include.manage %}
-         <li class="nav-item">
-            <a href="#" class="btn btn-secondary">Manage Widgets</a>
-         </li>
-         {% endif %}
-
-         {% if include.register %}
-         <li class="nav-item ">
-            <a href="#" class="nav-link">
-               Sign in
-            </a>
-         </li>
-         <li class="d-flex align-items-center">
-            <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
-               Register
-            </a>
-         </li>
-         {% endif %}
-
-         {% if include.plus %}
-         <li class="nav-item">
-            <a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
-         </li>
-         {% endif %}
-
-         {% if include.premium %}
-         <li class="nav-item">
-            <a href="#" class="btn btn-success">Go Premium</a>
-         </li>
-         {% endif %}
-
-         {% if include.sync %}
-         <li class="nav-item">
-            <a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
-         </li>
-         {% endif %}
-
-         {% if include.language %}
-         <li class="nav-item dropdown">
-            <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-               <span class="flag flag-gb mr-2"></span>English
-            </a>
-            <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
-               {% for language in site.data.languages %}
-               <a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
-                  language.name }}</a>
-               {% endfor %}
-            </div>
-         </li>
-         {% endif %}
-
-
-         <li class="nav-item d-lg-none">
-            <a href="#" class="nav-link  px-1" data-toggle="collapse" data-toggle-class=""
-               data-target="#navbarToggler">
-               {% include ui/icon.html icon="menu" %}
-            </a>
-         </li>
-      </ul>
-   </div>
+      <li class="nav-item d-lg-none">
+         <a href="#" class="nav-link  px-1" data-toggle="collapse" data-toggle-class=""
+            data-target="#navbarToggler">
+            {% include ui/icon.html icon="menu" %}
+         </a>
+      </li>
+   </ul>
 </div>
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index fcbce86f3..bb3551cf9 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -20,8 +20,8 @@
 
 	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
 
-	{% include_cached layout/css.html %}
-	{% include_cached layout/js.html %}
+	{% include layout/css.html %}
+	{% include layout/js.html %}
 </head>
 <body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
 
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index b7bb265c5..b0c16cc70 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -3,10 +3,18 @@ layout: base
 ---
 
 <div class="d-flex h-auto min-h-screen">
+
+   {% if page.nav-position == "left" or page.nav-position == "right" %}
    {% include layout/sidenav.html %}
+   {% endif %}
 
    <div class="flex-fill d-flex flex-column mw-100">
-      {% include_cached layout/header.html %}
+      {{ page.header-dark }}
+      {% include layout/header.html dark=page.header-dark %}
+
+      {% if page.nav-position == "top" %}
+      {% include layout/topnav.html %}
+      {% endif %}
 
       <div class="d-flex flex-fill">
 
diff --git a/pages/header-dark.html b/pages/header-dark.html
new file mode 100644
index 000000000..4315fc12a
--- /dev/null
+++ b/pages/header-dark.html
@@ -0,0 +1,4 @@
+---
+title: Dark header
+header-dark: true
+---
diff --git a/pages/navbar-left.html b/pages/navbar-left.html
new file mode 100644
index 000000000..f3fa0309c
--- /dev/null
+++ b/pages/navbar-left.html
@@ -0,0 +1,5 @@
+---
+title: Sidebar left
+menu: layout.sidebar-left
+nav-position: left
+---
diff --git a/pages/navbar-right.html b/pages/navbar-right.html
new file mode 100644
index 000000000..6777193b3
--- /dev/null
+++ b/pages/navbar-right.html
@@ -0,0 +1,5 @@
+---
+title: Sidebar right
+menu: layout.sidebar-right
+nav-position: right
+---
diff --git a/pages/navbar-top.html b/pages/navbar-top.html
new file mode 100644
index 000000000..aaac91089
--- /dev/null
+++ b/pages/navbar-top.html
@@ -0,0 +1,3 @@
+---
+title: Navbar top
+---
diff --git a/pages/sidebar.html b/pages/sidebar.html
deleted file mode 100644
index 0280a907a..000000000
--- a/pages/sidebar.html
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Sidebar
-body-class: sidebar-folded
----
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ae1b3f4e6..d556265d0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -105,9 +105,9 @@ $avatar-sizes: (
   "xl": 6rem
 ) !default;
 
-$font-size-base: .9375rem !default;
+$font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: (24 / 15) !default;
+$line-height-base: 1.5 !default;
 
 $border-radius: 3px !default;