change menu components position in header

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());

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}}

app/assets/stylesheets/common/base/menu-panel.scss

@@ -1,18 +1,15 @@
 .menu-panel.slide-in {
   position: fixed;
+  // positions are relative to the .d-header .panel div
   right: 0;
   top: 0;
-
-  .panel-body {
-    position: absolute;
-    top: 3px;
-    bottom: 37px;
-    width: 97%;
-  }
 }
 
 .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 +17,6 @@
   box-shadow: 0 2px 2px rgba(0,0,0, .25);
   background-color: $secondary;
   z-index: 1100;
-  overflow: none;
   padding: 0.5em;
   width: 300px;