diff --git a/app/components/page-header/component.js b/app/components/page-header/component.js
index 2f621f897..8325f317e 100644
--- a/app/components/page-header/component.js
+++ b/app/components/page-header/component.js
@@ -69,6 +69,7 @@ export default Ember.Component.extend({
     let currentPathArr  = this.get('currentPath').split('.');
     let navPartial      = '';
     let isInCurrentPath = false;
+    let bottomRow       = Ember.$('.bottom-row');
 
     hoverableTabs.forEach((tab) => {
       if (currentPathArr.contains(tab)) {
@@ -79,14 +80,17 @@ export default Ember.Component.extend({
 
     if (this.get('forcedMenu')) {
       navPartial = this.get('forcedMenu');
-      Ember.$('.bottom-row').addClass('subactive');
+      bottomRow.addClass('subactive');
+    } else {
+      if (bottomRow.hasClass('subactive')) {
+        bottomRow.removeClass('subactive');
+      }
     }
 
     if (isInCurrentPath) {
       this.set('subnavPartial', `tabs/${navPartial}`);
     } else {
       this.set('subnavPartial', null);
-      Ember.$('.bottom-row').toggleClass('subhover');
     }
   }).on('init'),
 
diff --git a/app/styles/layout/_header.scss b/app/styles/layout/_header.scss
index 0de085711..ff4c7ae6b 100644
--- a/app/styles/layout/_header.scss
+++ b/app/styles/layout/_header.scss
@@ -254,12 +254,12 @@ HEADER {
   .bottom-row {
     min-height: $bottomHeight;
     background-color: $bottom-row;
+    transition: ease all .05s;
 
     &.subactive {
       background-color: $accent-two;
     }
 
-
     NAV {
       font-size: 14px;
       margin-left: 68px;