diff --git a/app/assets/javascripts/discourse/components/menu-panel.js.es6 b/app/assets/javascripts/discourse/components/menu-panel.js.es6
index 8961e9f931b..8a5b2ea2756 100644
--- a/app/assets/javascripts/discourse/components/menu-panel.js.es6
+++ b/app/assets/javascripts/discourse/components/menu-panel.js.es6
@@ -28,11 +28,9 @@ export default Ember.Component.extend({
       const $buttonPanel = $('header ul.icons');
       if ($buttonPanel.length === 0) { return; }
 
-      const buttonPanelPos = $buttonPanel.offset();
-      const posTop = parseInt(buttonPanelPos.top + $buttonPanel.height() - $('header.d-header').offset().top);
-      const posLeft = parseInt(buttonPanelPos.left + $buttonPanel.width() - width);
-
-      this.$().css({ left: posLeft + "px", top: posTop + "px", height: 'auto' });
+      // These values need to be set here, not in the css file - this is to deal with the
+      // possibility of the window being resized and the menu changing from .slide-in to .drop-down.
+      this.$().css({ top: '100%', height: 'auto' });
 
       // adjust panel height
       const fullHeight = parseInt($window.height());
diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs
index 870906119b1..ab92b195171 100644
--- a/app/assets/javascripts/discourse/templates/header.hbs
+++ b/app/assets/javascripts/discourse/templates/header.hbs
@@ -1,8 +1,3 @@
-{{plugin-outlet "header-before-dropdowns"}}
-{{user-menu visible=userMenuVisible logoutAction="logout"}}
-{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
-{{search-menu visible=searchVisible}}
-
 <div class='wrap'>
   <div class='contents clearfix'>
     {{home-logo minimized=showExtraInfo}}
@@ -54,6 +49,10 @@
           {{/header-dropdown}}
         {{/if}}
       </ul>
+        {{plugin-outlet "header-before-dropdowns"}}
+        {{user-menu visible=userMenuVisible logoutAction="logout"}}
+        {{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
+        {{search-menu visible=searchVisible}}
     </div>
 
     {{#if showExtraInfo}}
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 9eb96fb380e..85a9869a4f8 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -1,5 +1,6 @@
 .menu-panel.slide-in {
   position: fixed;
+  // positions are relative to the .d-header .panel div
   right: 0;
   top: 0;
 
@@ -13,6 +14,9 @@
 
 .menu-panel.drop-down {
   position: absolute;
+  // positions are relative to the .d-header .panel div
+  top: 100%; // directly underneath .panel
+  right: -10px; // 10px to the right of .panel - adjust as needed
 }
 
 .menu-panel {
@@ -20,7 +24,6 @@
   box-shadow: 0 2px 2px rgba(0,0,0, .25);
   background-color: $secondary;
   z-index: 1100;
-  overflow: none;
   padding: 0.5em;
   width: 300px;