2 files changed, 10 insertions, 13 deletions
diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index f8f0aea427e..cad095daae1 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -4,10 +4,9 @@ hideEndFade = ($scrollingTabs) ->
 
     $this
       .find('.fade-right')
-      .toggleClass('end-scroll', $this.width() is $this.prop('scrollWidth'))
+      .toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'))
 
 $ ->
-  $('.fade-left').addClass('end-scroll')
 
   hideEndFade($('.scrolling-tabs'))
 
@@ -21,5 +20,5 @@ $ ->
     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)
+    $this.find('.fade-left').toggleClass('scrolling', currentPosition > 0)
+    $this.find('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 0281b06d3ba..f53e63606de 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,6 +1,6 @@
 @mixin fade($gradient-direction, $rgba, $gradient-color) {
-  visibility: visible;
-  opacity: 1;
+  visibility: hidden;
+  opacity: 0;
   z-index: 2;
   position: absolute;
   bottom: 12px;
@@ -13,9 +13,9 @@
   background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
   background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
 
-  &.end-scroll {
-    visibility: hidden;
-    opacity: 0;
+  &.scrolling {
+    visibility: visible;
+    opacity: 1;
     transition-duration: .3s;
   }
 
@@ -272,7 +272,7 @@
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-sm-max) {
       display: none;
     }
 
@@ -377,9 +377,7 @@
   .nav-control {
 
     .fade-right {
-      @media (min-width: $screen-xs-max) {
-        right: 68px;
-      }
+
       @media (max-width: $screen-xs-min) {
         right: 0;
       }