diff --git a/_config.yml b/_config.yml
index 13f2dd9c05..0cf1e6807b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -5,8 +5,8 @@ exclude:
   - Gemfile
   - Gemfile.lock
   - .gitignore
-
 layout: page
 navbar-links:
-  Home: ""
-  Documents: "/docs"
+  Home: "docs"
+  Documents: "docs"
+
diff --git a/_includes/nav.html b/_includes/nav.html
new file mode 100644
index 0000000000..e9939d36e6
--- /dev/null
+++ b/_includes/nav.html
@@ -0,0 +1,59 @@
+<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      {% if site.title-img %}
+        <a class="navbar-brand navbar-brand-logo" href="{{ site.url }}"><img src="{{ site.title-img }}"/></a>
+      {% else %}
+        <a class="navbar-brand" href="{{ site.url }}">{{ site.title }}</a>
+      {% endif %}
+    </div>
+
+    <div class="collapse navbar-collapse show" id="main-navbar">
+      <ul class="nav navbar-nav navbar-right">
+      {% for link in site.navbar-links %}
+        {% if link[1].first %}
+          <li class="navlinks-container">
+            <a class="navlinks-parent" href="javascript:void(0)">{{ link[0] }}</a>
+            <div class="navlinks-children">
+              {% for childlink in link[1] %}
+                {% for linkparts in childlink %}
+                  {% include navbarlink.html link=linkparts %}
+                {% endfor %}
+              {% endfor %}
+            </div>
+          </li>
+        {% else %}
+          <li>
+            {% include navbarlink.html link=link %}
+          </li>
+        {% endif %}
+        {% endfor %}
+      </ul>
+    </div>
+
+	{% if page.image and (layout.show-avatar or page.show-avatar) %}
+	<div class="avatar-container">
+	  <div class="avatar-img-border">
+	    <a href="{{ site.url }}">
+	      <img class="avatar-img" src="{{ page.image | prepend: site.baseurl | replace: '//', '/' }}" />
+		</a>
+	  </div>
+	</div>
+	{% elsif site.avatar and (layout.show-avatar or page.show-avatar) %}
+	<div class="avatar-container">
+	  <div class="avatar-img-border">
+	    <a href="{{ site.url }} ">
+	      <img class="avatar-img" src="{{ site.avatar | prepend: site.baseurl | replace: '//', '/' }}" />
+		</a>
+	  </div>
+	</div>
+	{% endif %}
+
+  </div>
+</nav>
diff --git a/_layouts/base.html b/_layouts/base.html
index 550cb05bac..7e01660793 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -1,7 +1,7 @@
 ---
 common-css:
   - "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
-  - "/css/bootstrap-social.css"
+  - "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css"
   - "https://deanattali.com/css/main.css"
 common-ext-css:
   - "//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"