MarkBind · yamgent · Mar 31, 2019 · Mar 25, 2019 · Mar 25, 2019 · Mar 25, 2019
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -116,11 +116,8 @@ footer {
 /* Side Navigation menus */
 
 .spacer-top {
-    /*
-      spacer-top class is a work around for MarkBind <navbar> component using "position: fixed".
-      This class can be removed once the component's position type is changed.
-    */
-    padding-top: 70px;
+    /* This class is to ensure adequate spacing of contents from the top of the page */
+    padding-top: 1rem;
 }
 
 .scrollable {

diff --git a/asset/js/vue-strap.min.js b/asset/js/vue-strap.min.js
diff --git a/docs/_markbind/headers/header.md b/docs/_markbind/headers/header.md
@@ -0,0 +1,18 @@
+<header>
+  <link rel="stylesheet" href="../css/main.css">
+  <navbar type="inverse">
+    <a slot="brand" href="../index.html" title="Home" class="navbar-brand"><img src="../images/logo-darkbackground.png" height="20" /></a>
+    <li><a href="../index.html" class="nav-link">HOME</a></li>
+    <li><a href="../userGuide/index.html" class="nav-link">DOCS</a></li>
+    <li><a href="../showcase.html" class="nav-link">SHOWCASE</a></li>
+    <li><a href="../about.html" class="nav-link">ABOUT</a></li>
+    <li>
+      <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link"><md>:fab-github:</md></a>
+    </li>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+      </form>
+    </li>
+  </navbar>
+</header>
diff --git a/docs/about.md b/docs/about.md
@@ -1,10 +1,9 @@
 <frontmatter>
   title: "About Us"
+  header: header.md
   footer: footer.md
 </frontmatter>
 
-<include src="./common/header.md" />
-
 # About Us
 
 <span class="lead">MarkBind is a project **based in [National University of Singapore, School of Computing](http://www.comp.nus.edu.sg/)**, and is funded by an education grant from [NUS Center for Development of Teaching and Learning](http://www.cdtl.nus.edu.sg/).</span>

diff --git a/docs/common/header.md b/docs/common/header.md
diff --git a/docs/index.md b/docs/index.md
@@ -1,10 +1,9 @@
 <frontmatter>
   title: "Generate More Dynamic Websites from Markdown Text"
+  header: header.md
   footer: footer.md
 </frontmatter>
 
-<include src="./common/header.md" />
-
 <h1 class="display-3"><md>**MarkBind**</md></h1>
 
 <span class="lead">

diff --git a/docs/showcase.md b/docs/showcase.md
@@ -1,10 +1,9 @@
 <frontmatter>
   title: "Showcase"
+  header: header.md
   footer: footer.md
 </frontmatter>
 
-<include src="./common/header.md" />
-
 # Examples of MarkBind Websites
 
 ## Course Websites

diff --git a/docs/userGuide/addingPages.md b/docs/userGuide/addingPages.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
@@ -11,8 +12,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 
 # {{ title }}
 

diff --git a/docs/userGuide/authoringContents.md b/docs/userGuide/authoringContents.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">Authoring Contents</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 {% set pages = [

diff --git a/docs/userGuide/cliCommands.md b/docs/userGuide/cliCommands.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Command Line Interface (CLI)"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # MarkBind CLI
 
 ### Overview

diff --git a/docs/userGuide/deployingTheSite.md b/docs/userGuide/deployingTheSite.md
@@ -1,13 +1,12 @@
 <variable name="title" id="title">Deploying the Site</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: default
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead">

diff --git a/docs/userGuide/formattingContents.md b/docs/userGuide/formattingContents.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 2
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead" id="overview">

diff --git a/docs/userGuide/fullSyntaxReference.md b/docs/userGuide/fullSyntaxReference.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Full Syntax Reference"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Full Syntax Reference
 
 {% set syntax_topics = {

diff --git a/docs/userGuide/gettingStarted.md b/docs/userGuide/gettingStarted.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">Getting Started</variable>
 <frontmatter>
   title: "User Guide - {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <big>**Prerequisites**</big>

diff --git a/docs/userGuide/glossary.md b/docs/userGuide/glossary.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "Glossary"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 #### Live Preview
 
 <span id="live-preview">

diff --git a/docs/userGuide/makingTheSiteSearchable.md b/docs/userGuide/makingTheSiteSearchable.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 2
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead" id="overview">

diff --git a/docs/userGuide/markBindInTheProjectWorkflow.md b/docs/userGuide/markBindInTheProjectWorkflow.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">MarkBind in the Project Workflow</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead">

diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }} "
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
@@ -11,8 +12,6 @@
 [_User Guide → {{ title }}_]({{ filename }}.html)
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 

diff --git a/docs/userGuide/readerFacingFeatures.md b/docs/userGuide/readerFacingFeatures.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Reader-Facing Features"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Reader-Facing Features
 
 <include src="fullSyntaxReference.md#dummy" optional />

diff --git a/docs/userGuide/reusingContents.md b/docs/userGuide/reusingContents.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 4
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead" id="overview">

diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md
@@ -1,12 +1,11 @@
 <frontmatter>
   title: "Configuring the Site"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   keywords: site.json
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Configuring the Site
 
 <span class="lead">

diff --git a/docs/userGuide/syntax/navBars.mbdf b/docs/userGuide/syntax/navBars.mbdf
@@ -2,11 +2,17 @@
 
 **Navbar allows visitors of your website to navigate through pages easily.**
 
+<box type="warning">
+  <markdown>
+Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguide/tweakingthepagestructure.html#headers) to ensure that they are correctly positioned at the top of the page, above the [site navigation]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#site-navigation-menus) and [page navigation]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#page-navigation-menus) menus.
+  </markdown>
+</box>
+
 <include src="outputBox.md" boilerplate >
 <span id="code">
 
 ```html
-<navbar placement="top" type="inverse">
+<navbar type="inverse">
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
@@ -41,14 +47,13 @@
 
 Name | Type | Default | Description 
 --- | --- | --- | ---
-placement | `String` | `''` | Supports: `top`, `bottom`, `static`, or empty for normal. 
 type | `String` | `default` | Supports: `inverse`, `default`.
 
 
 <span id="short" class="d-none">
 
 ```html
-<navbar placement="top" type="inverse">
+<navbar type="inverse">
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->

diff --git a/docs/userGuide/syntaxCheatSheet.md b/docs/userGuide/syntaxCheatSheet.md
@@ -1,11 +1,10 @@
 <frontmatter>
   title: "User Guide: Syntax Cheat Sheet"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # Syntax Cheat Sheet
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}

diff --git a/docs/userGuide/themes.md b/docs/userGuide/themes.md
@@ -1,12 +1,11 @@
 <variable name="title" id="title">Themes</variable>
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title }}
 
 <span class="lead">

diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
@@ -2,12 +2,11 @@
 
 <frontmatter>
   title: "User Guide: {{ title | safe }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
 </frontmatter>
 
-<include src="../common/header.md" />
-
 # {{ title | safe }}
 
 <span id="escapingCharacters">

diff --git a/docs/userGuide/tweakingThePageStructure.md b/docs/userGuide/tweakingThePageStructure.md
@@ -3,6 +3,7 @@
 
 <frontmatter>
   title: "User Guide: {{ title }}"
+  header: header.md
   footer: footer.md
   siteNav: userGuideSections.md
   pageNav: 3
@@ -12,8 +13,6 @@
 <md>[_User Guide → {{ title }}_]({{ filename }}.html)</md>
 </span>
 
-<include src="../common/header.md" />
-
 # Tweaking the Page Structure
 
 <span class="lead" id="overview">**MarkBind offers several ways to easily tweak the overall structure of a page**, for example, using headers, footers, scripts, or stylesheets.</span>