Merge branch 'nav-horizontal-alignment' into 'master'

Aligned the two navs horizontally

## What does this MR do?

Previously the 2 top navs were not aligned horizontally together. The top nav would be slightly to the left due to the settings dropdown. This corrects that by putting `position: absolute` on the dropdown toggle.

## What are the relevant issue numbers?

Closes #18513 

## Screenshots (if relevant)

![Screen_Shot_2016-06-13_at_10.20.22](/uploads/46f39a84dde74707578970f70ddda511/Screen_Shot_2016-06-13_at_10.20.22.png)

See merge request !4616

2 files changed, 29 insertions, 19 deletions

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index 6adac6dac97..f8f0aea427e 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -1,14 +1,25 @@
-class @LayoutNav
-  $ ->
-    $('.fade-left').addClass('end-scroll')
-    $('.scrolling-tabs').on 'scroll', (event) ->
-      $this = $(this)
-      $el = $(event.target)
-      currentPosition = $this.scrollLeft()
-      size = bp.getBreakpointSize()
-      controlBtnWidth = $('.controls').width()
-      maxPosition = $this.get(0).scrollWidth - $this.parent().width()
-      maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
-
-      $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
-      $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
+hideEndFade = ($scrollingTabs) ->
+  $scrollingTabs.each ->
+    $this = $(@)
+
+    $this
+      .find('.fade-right')
+      .toggleClass('end-scroll', $this.width() is $this.prop('scrollWidth'))
+
+$ ->
+  $('.fade-left').addClass('end-scroll')
+
+  hideEndFade($('.scrolling-tabs'))
+
+  $(window)
+    .off 'resize.nav'
+    .on 'resize.nav', ->
+      hideEndFade($('.scrolling-tabs'))
+
+  $('.scrolling-tabs').on 'scroll', (event) ->
+    $this = $(this)
+    currentPosition = $this.scrollLeft()
+    maxPosition = $this.prop('scrollWidth') - $this.outerWidth()
+
+    $this.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+    $this.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 4de89daeb36..1222dc9047a 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -280,11 +280,10 @@
     }
 
     .dropdown {
-      margin-left: 7px;
-
-      @media (max-width: $screen-xs-min) {
-        margin-left: 0;
-      }
+      position: absolute;
+      top: 7px;
+      right: 15px;
+      z-index: 2;
 
       li.active {
         font-weight: bold;