diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
index e5297ac3db..a85a43c4f9 100644
--- a/packages/vue-components/src/Dropdown.vue
+++ b/packages/vue-components/src/Dropdown.vue
@@ -56,6 +56,7 @@
 import Submenu from './Submenu.vue';
 import { toBoolean } from './utils/utils';
 import $ from './utils/NodeList';
+import preventOverflowOnMobile from './utils/dropdown';
 
 export default {
   components: {
@@ -84,6 +85,9 @@ export default {
     hasParentDropdown: {
       default: undefined,
     },
+    isParentNavbar: {
+      default: false,
+    },
   },
   data() {
     return {
@@ -131,11 +135,24 @@ export default {
     },
     hideDropdownMenu() {
       this.show = false;
-      $(this.$refs.dropdown).findChildren('ul').each(ul => ul.classList.toggle('show', false));
+      $(this.$refs.dropdown).findChildren('ul').each((ul) => {
+        ul.classList.toggle('show', false);
+
+        if (window.innerWidth < 768 && this.isParentNavbar) {
+          ul.style.removeProperty('left');
+        }
+      });
     },
     showDropdownMenu() {
       this.show = true;
-      $(this.$refs.dropdown).findChildren('ul').each(ul => ul.classList.toggle('show', true));
+      $(this.$refs.dropdown).findChildren('ul').each((ul) => {
+        ul.classList.toggle('show', true);
+
+        // check if the dropdown is part of the sliding menu on mobile
+        if (window.innerWidth < 768 && this.isParentNavbar) {
+          preventOverflowOnMobile(ul);
+        }
+      });
     },
   },
   mounted() {
@@ -169,6 +186,24 @@ export default {
 </script>
 
 <style scoped>
+    @media (max-width: 767px) {
+        .navbar-default .dropdown {
+            position: static;
+        }
+
+        .navbar-default .dropdown-menu {
+            position: absolute;
+            max-width: 100%;
+            max-height: 75vh;
+            overflow-y: auto;
+            overscroll-behavior: contain;
+        }
+
+        .navbar-default .dropdown-menu-right {
+            right: auto;
+        }
+    }
+
     .secret {
         position: absolute;
         clip: rect(0 0 0 0);
@@ -187,6 +222,8 @@ export default {
 
     .dropdown-toggle {
         cursor: pointer;
+        display: block;
+        width: max-content;
     }
 
     .navbar .dropdown-toggle {
diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index b55ca9d4d7..fdaa098805 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -2,29 +2,18 @@
   <div>
     <nav ref="navbar" :class="['navbar', 'navbar-expand-md', themeOptions, addClass, fixedOptions]">
       <div class="container-fluid">
-        <div class="navbar-brand">
+        <div class="navbar-left">
           <slot name="brand"></slot>
         </div>
-        <button
-          v-if="!slots.collapse"
-          class="navbar-toggler"
-          type="button"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-          @click="toggleCollapse"
-        >
-          <span class="navbar-toggler-icon"></span>
-          <slot name="collapse"></slot>
-        </button>
-
-        <div :class="['navbar-collapse',{collapse:collapsed}]">
+        <div ref="navbarDefault" class="navbar-default">
           <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
             <slot></slot>
           </ul>
-          <ul v-if="slots.right" class="navbar-nav navbar-right">
-            <slot name="right"></slot>
-          </ul>
         </div>
+
+        <ul v-if="slots.right" class="navbar-nav navbar-right">
+          <slot name="right"></slot>
+        </ul>
       </div>
     </nav>
     <div
@@ -73,12 +62,12 @@ export default {
   provide() {
     return {
       toggleLowerNavbar: this.toggleLowerNavbar,
+      isParentNavbar: true,
     };
   },
   data() {
     return {
       id: 'bs-example-navbar-collapse-1',
-      collapsed: true,
       styles: {},
       isLowerNavbarShowing: false,
     };
@@ -111,10 +100,6 @@ export default {
     },
   },
   methods: {
-    toggleCollapse(e) {
-      if (e) { e.preventDefault(); }
-      this.collapsed = !this.collapsed;
-    },
     // Splits a normalised URL into its parts,
     // e.g http://site.org/foo/bar/index.html -> ['foo','bar','index.html']
     splitUrl(url) {
@@ -167,7 +152,8 @@ export default {
     },
     highlightLink(url) {
       const defHlMode = this.defaultHighlightOn;
-      const navLis = Array.from(this.$el.querySelector('.navbar-nav').children);
+      const navLis = [];
+      this.$el.querySelectorAll('.navbar-nav').forEach(nav => navLis.push(...Array.from(nav.children)));
       // attempt an exact match first
       for (let i = 0; i < navLis.length; i += 1) {
         const li = navLis[i];
@@ -254,35 +240,128 @@ export default {
         if (!content.contains(e.target)) content.classList.remove('open');
       });
     });
-    $(this.$el).on('click', 'li:not(.dropdown)>a', (e) => {
-      if (e.target.classList.contains('submenu-toggle')) { return; }
-      setTimeout(() => { this.collapsed = true; }, 200);
-    }).onBlur((e) => {
-      if (!this.$el.contains(e.target)) { this.collapsed = true; }
-    });
-    if (this.slots.collapse) $('[data-toggle="collapse"]', this.$el).on('click', e => this.toggleCollapse(e));
 
     // highlight current nav link
     this.highlightLink(window.location.href);
 
+    // scroll default navbar horizontally to current link if it is beyond the current scroll
+    const currentNavlink = $(this.$refs.navbarDefault).find('.current')[0];
+    if (currentNavlink && window.innerWidth < 768
+        && currentNavlink.offsetLeft + currentNavlink.offsetWidth > window.innerWidth) {
+      this.$refs.navbarDefault.scrollLeft = currentNavlink.offsetLeft + currentNavlink.offsetWidth
+        - window.innerWidth;
+    }
+
     this.toggleLowerNavbar();
     $(window).on('resize', this.toggleLowerNavbar);
+
+    // scroll default navbar horizontally when mousewheel is scrolled
+    $(this.$refs.navbarDefault).on('wheel', (e) => {
+      const isDropdown = (nodes) => {
+        for (let i = 0; i < nodes.length; i += 1) {
+          if (nodes[i].classList && nodes[i].classList.contains('dropdown-menu')) {
+            return true;
+          }
+        }
+        return false;
+      };
+
+      // prevent horizontal scrolling if the scroll is on dropdown menu
+      if (window.innerWidth < 768 && !isDropdown(e.path)) {
+        e.preventDefault();
+        this.$refs.navbarDefault.scrollLeft += e.deltaY;
+      }
+    });
   },
   beforeDestroy() {
     $('.dropdown', this.$el).off('click').offBlur();
-    if (this.slots.collapse) $('[data-toggle="collapse"]', this.$el).off('click');
     $(window).off('resize', this.toggleLowerNavbar);
+    $(this.$refs.navbarDefault).off('wheel');
   },
 };
 </script>
 
 <style scoped>
     @media (max-width: 767px) {
-        .navbar-collapse {
-            max-height: 80vh !important;
-            overflow-x: hidden !important;
-            overflow-y: scroll !important;
+        .navbar {
+            padding-left: 0;
+            padding-right: 0;
+            padding-bottom: 0;
+        }
+
+        .navbar-left {
+            max-width: 50%;
+            order: 1;
+            padding-left: 1rem;
+        }
+
+        .navbar-left * {
+            white-space: normal;
+        }
+
+        .navbar-right {
+            order: 1;
+            max-width: 50%;
+            padding: 0 16px;
         }
+
+        .navbar-default {
+            display: block;
+            margin-top: 0.3125rem;
+            width: 100%;
+            order: 2;
+            overflow-x: scroll;
+
+            /* Hide overflow scroll bar */
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+
+        /* Hide overflow scroll bar for Chrome and Safari */
+        .navbar-default::-webkit-scrollbar {
+            display: none;
+        }
+
+        .navbar-default ul {
+            flex-direction: row;
+            margin-top: 0 !important;
+            width: 100%;
+        }
+
+        .navbar-default > ul > * {
+            background: rgba(0, 0, 0, 0.2);
+            padding: 0.3125rem 0.625rem;
+            flex-grow: 1;
+        }
+
+        .navbar-light .navbar-default > ul > * {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        .navbar-default > ul > .current {
+            background: transparent;
+        }
+
+        .navbar-default a,
+        >>> .dropdown-toggle {
+            margin: 0 auto;
+            width: max-content;
+        }
+
+        >>> .dropdown {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .navbar-left {
+        display: inline-block;
+        font-size: 1.25rem;
+        line-height: inherit;
+        padding-right: 1rem;
+        padding-top: 0.3125rem;
+        padding-bottom: 0.3125rem;
+        white-space: nowrap;
     }
 
     .navbar-fixed {
@@ -291,6 +370,13 @@ export default {
         z-index: 1000;
     }
 
+    .navbar-default {
+        display: flex;
+        flex-basis: auto;
+        flex-grow: 1;
+        align-items: center;
+    }
+
     >>> .dropdown-current {
         color: #fff !important;
         background: #007bff;
diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue
index 865ec6cc50..fe19f63e26 100644
--- a/packages/vue-components/src/Searchbar.vue
+++ b/packages/vue-components/src/Searchbar.vue
@@ -264,9 +264,13 @@ export default {
 
     @media screen and (max-width: 768px) {
         .search-dropdown-menu {
-            min-width: auto;
+            min-width: 90vw;
             max-height: 30em;
             overflow-y: scroll;
         }
+
+        .dropdown-menu.search-dropdown-menu {
+            position: absolute;
+        }
     }
 </style>
diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue
index f573eedca4..c35e93391b 100644
--- a/packages/vue-components/src/Submenu.vue
+++ b/packages/vue-components/src/Submenu.vue
@@ -25,6 +25,7 @@
 import { toBoolean } from './utils/utils';
 import $ from './utils/NodeList';
 import positionSubmenu from './utils/submenu';
+import preventOverflowOnMobile from './utils/dropdown';
 
 export default {
   props: {
@@ -44,6 +45,11 @@ export default {
       dropleft: false,
     };
   },
+  inject: {
+    isParentNavbar: {
+      default: false,
+    },
+  },
   computed: {
     disabledBool() {
       return toBoolean(this.disabled);
@@ -59,6 +65,13 @@ export default {
       this.show = true;
       $(this.$refs.submenu).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', true);
+
+        // check if submenu is part of the navbar sliding menu on mobile
+        if (window.innerWidth < 768 && this.isParentNavbar) {
+          preventOverflowOnMobile(ul);
+          return;
+        }
+
         if (positionSubmenu.isRightAlign(ul)) {
           this.alignMenuRight();
         } else {
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
index 5fef17d709..0658a93736 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -9,7 +9,7 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -20,20 +20,8 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -58,9 +46,9 @@ exports[`Navbar and secondary navbar navbar with page nav button 1`] = `
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
@@ -86,7 +74,7 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -97,20 +85,8 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -135,9 +111,9 @@ exports[`Navbar and secondary navbar navbar with site and page nav buttons 1`] =
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
@@ -165,7 +141,7 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -176,20 +152,8 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -214,9 +178,9 @@ exports[`Navbar and secondary navbar navbar with site nav button 1`] = `
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
@@ -242,7 +206,7 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
       class="container-fluid"
     >
       <div
-        class="navbar-brand"
+        class="navbar-left"
       >
         <a
           class="navbar-brand"
@@ -253,20 +217,8 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
         </a>
       </div>
        
-      <button
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        class="navbar-toggler"
-        type="button"
-      >
-        <span
-          class="navbar-toggler-icon"
-        />
-         
-      </button>
-       
       <div
-        class="navbar-collapse collapse"
+        class="navbar-default"
       >
         <ul
           class="navbar-nav mr-auto mt-2 mt-lg-0"
@@ -291,9 +243,9 @@ exports[`Navbar and secondary navbar navbar without site and page nav buttons 1`
             </a>
           </li>
         </ul>
-         
-        <!---->
       </div>
+       
+      <!---->
     </div>
   </nav>
    
diff --git a/packages/vue-components/src/utils/dropdown.js b/packages/vue-components/src/utils/dropdown.js
new file mode 100644
index 0000000000..fb93264f25
--- /dev/null
+++ b/packages/vue-components/src/utils/dropdown.js
@@ -0,0 +1,23 @@
+export default function preventOverflowOnMobile(el) {
+  // get highest-level dropdown menu
+  let rootDropdownMenu = el;
+  let currentEl = el;
+  while (currentEl) {
+    if (currentEl.classList && currentEl.classList.contains('dropdown-menu')) {
+      rootDropdownMenu = currentEl;
+    }
+    currentEl = currentEl.parentNode;
+  }
+
+  // shift dropdown relative to its parent and prevent overflow if necessary
+  if (rootDropdownMenu.offsetWidth > window.innerWidth) {
+    rootDropdownMenu.setAttribute('style', 'left: 0px;');
+  } else {
+    const dropdownPosition = rootDropdownMenu.parentNode.getBoundingClientRect();
+    const overflowedWidth = dropdownPosition.left + rootDropdownMenu.offsetWidth - window.innerWidth;
+    const leftPosition = overflowedWidth < 0
+      ? dropdownPosition.left
+      : dropdownPosition.left - overflowedWidth;
+    rootDropdownMenu.setAttribute('style', `left: ${leftPosition}px;`);
+  }
+}