diff --git a/docs/_navbar.md b/docs/_navbar.md
index cfd9fc27bf..e3b31ba872 100644
--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@@ -1,29 +1 @@
-- Translations
-  - [English](/index.md)
-  - [Afrikaans](/i18n/Afrikaans/index.md)
-  - [Arabic](/i18n/Arabic/index.md)
-  - [Catalan](/i18n/Catalan/index.md)
-  - [Chinese](/i18n/Chinese/index.md)
-  - [Czech](/i18n/Czech/index.md)
-  - [Danish](/i18n/Danish/index.md)
-  - [Dutch](/i18n/Dutch/index.md)
-  - [Finnish](/i18n/Finnish/index.md)
-  - [French](/i18n/French/index.md)
-  - [German](/i18n/German/index.md)
-  - [Greek](/i18n/Greek/index.md)
-  - [Hebrew](/i18n/Hebrew/index.md)
-  - [Hindi](/i18n/Hindi/index.md)
-  - [Hungarian](/i18n/Hungarian/index.md)
-  - [Italian](/i18n/Italian/index.md)
-  - [Japanese](/i18n/Japanese/index.md)
-  - [Korean](/i18n/Korean/index.md)
-  - [Norwegian](/i18n/Norwegian/index.md)
-  - [Polish](/i18n/Polish/index.md)
-  - [Portuguese](/i18n/Portuguese/index.md)
-  - [Romanian](/i18n/Romanian/index.md)
-  - [Russian](/i18n/Russian/index.md)
-  - [Serbian](/i18n/Serbian/index.md)
-  - [Swedish](/i18n/Swedish/index.md)
-  - [Turkish](/i18n/Turkish/index.md)
-  - [Ukrainian](/i18n/Ukrainian/index.md)
-  - [Vietnamese](/i18n/Vietnamese/index.md)
+- [Translations](_translations.md)
diff --git a/docs/_theme.css b/docs/_theme.css
index 0e574be15a..fd2a2ebf3f 100644
--- a/docs/_theme.css
+++ b/docs/_theme.css
@@ -17,7 +17,7 @@ body {
   text-decoration: none !important;
 }
 
-/****** Universal Nav ****/
+/****** Nav ****/
 
 .universal-nav {
   margin: 0px;
@@ -31,23 +31,28 @@ body {
   z-index: 100;
 }
 
+.universal-nav a.translations-link {
+  color: #ffffff;
+  position: fixed;
+  right: 50px;
+  line-height: 24px;
+  font-size: 16px;
+  margin: 6px 0;
+  padding: 0 0;
+}
+
 .universal-nav img {
   margin: 7px 0px;
   height: 24px;
 }
 
-/****** Translations Nav ****/
-/* The app nav is used only when loadNavBar is set to true */
-.app-nav.no-badge {
-  margin-top: 50px;
-  margin-right: calc(100px + 1.5rem);
-  font-size: 1.25rem;
+.app-nav {
+  visibility: hidden;
 }
 
 @media screen and (max-width: 768px) {
-  body .app-nav.no-badge {
-    margin-top: 50px;
-    margin-right: calc(1.5rem);
+  .universal-nav a.translations-link {
+    visibility: hidden;
   }
 }
 
diff --git a/docs/_translations.md b/docs/_translations.md
new file mode 100644
index 0000000000..7c9da1bcf6
--- /dev/null
+++ b/docs/_translations.md
@@ -0,0 +1,36 @@
+## Read these guides in other languages
+
+<div style='columns: 3; -webkit-columns: 3; -moz-columns: 3;' >
+
+- [English](/index.md)
+- [Afrikaans](/i18n/Afrikaans/index.md)
+- [Arabic](/i18n/Arabic/index.md)
+- [Catalan](/i18n/Catalan/index.md)
+- [Chinese](/i18n/Chinese/index.md)
+- [Czech](/i18n/Czech/index.md)
+- [Danish](/i18n/Danish/index.md)
+- [Dutch](/i18n/Dutch/index.md)
+- [Finnish](/i18n/Finnish/index.md)
+- [French](/i18n/French/index.md)
+- [German](/i18n/German/index.md)
+- [Greek](/i18n/Greek/index.md)
+- [Hebrew](/i18n/Hebrew/index.md)
+- [Hindi](/i18n/Hindi/index.md)
+- [Hungarian](/i18n/Hungarian/index.md)
+- [Italian](/i18n/Italian/index.md)
+- [Japanese](/i18n/Japanese/index.md)
+- [Korean](/i18n/Korean/index.md)
+- [Norwegian](/i18n/Norwegian/index.md)
+- [Polish](/i18n/Polish/index.md)
+- [Portuguese](/i18n/Portuguese/index.md)
+- [Romanian](/i18n/Romanian/index.md)
+- [Russian](/i18n/Russian/index.md)
+- [Serbian](/i18n/Serbian/index.md)
+- [Swedish](/i18n/Swedish/index.md)
+- [Turkish](/i18n/Turkish/index.md)
+- [Ukrainian](/i18n/Ukrainian/index.md)
+- [Vietnamese](/i18n/Vietnamese/index.md)
+
+</div>
+
+Interested in updating the translations? Visit: <https://translate.freecodecamp.org>
diff --git a/docs/crowdin.yml b/docs/crowdin.yml
index a530cf1e4c..409e816e43 100644
--- a/docs/crowdin.yml
+++ b/docs/crowdin.yml
@@ -19,6 +19,7 @@ files:
     ignore:
       - _coverpage.md
       - _navbar.md
+      - _translations.md
       - README.md
   - source: /flight-manuals/*.md
     translation: /i18n/%language%/flight-manuals/%original_file_name%
diff --git a/docs/index.html b/docs/index.html
index 60bdaf6067..8df62bb9b3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -36,12 +36,15 @@
 
 </head>
 
-<body class='close'>
+<body class="close">
   <!-- Navigation (we are using a div, instead of nav to avoid conflict with docsify's nav) -->
   <div class='universal-nav'>
     <a class="app-name-link" data-nosearch="" href="/">
       <img alt="freeCodeCamp.org" src="images/branding/primary_logo.svg">
     </a>
+    <a class="translations-link" data-nosearch="" href="/#/_translations">
+      Translations
+    </a>
   </div>
 
   <!-- App with its own nav, search and sidebar -->
@@ -51,10 +54,10 @@
 
       homepage: 'index.md',
 
-
+      relativePath: true,
       // common aliases
       alias: {
-
+        '.*/_navbar.md': '/_navbar.md'
       },
 
 
@@ -76,9 +79,11 @@
       maxLevel: 2,
       subMaxLevel: 2,
 
-      loadNavbar: false, //disabled for the sidebar introduced by activating i18n
       topMargin: 90,
 
+      // we do not use the built in navbar other then in mobile view
+      loadNavbar: true,
+      mergeNavbar: true,
 
       // Plugins
       search: {
@@ -92,7 +97,7 @@
       },
 
       pagination: {
-        crossChapter: false
+        crossChapter: true
       },
 
       remoteMarkdown: {
@@ -102,14 +107,19 @@
       plugins: [
         function (hook, vm) {
           hook.beforeEach(function (html) {
+
+            if (vm.route.file === '_translations.md') return html;
+
             var url =
               'https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/' +
               vm.route.file;
-            var editHtml = '[<i class="far fa-edit"></i> Edit this guide on GitHub](' + url + ')';
+
+            var editLink = '[<i class="far fa-edit"></i> Edit this guide on GitHub](' + url + ')';
+
             return (
               html +
               '\n----\n' +
-              editHtml
+              editLink
             );
           });
         }