diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 02b422cecd..caf6df940e 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -39,15 +39,20 @@ $(document).ready(function() {
   $('.unit .item-actions .delete-button').bind('click', deleteUnit);
   $('.new-unit-item').bind('click', createNewUnit);
 
-  // nav-related
   $('body').addClass('js');
 
+  // nav - dropdown related
+  $body.click(function(e){
+    $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
+    $('.nav-dropdown .nav-item .title').removeClass('is-selected');
+  });
+
   $('.nav-dropdown .nav-item .title').click(function(e){
 
     $subnav = $(this).parent().find('.wrapper-nav-sub');
     $title = $(this).parent().find('.title');
-
     e.preventDefault();
+    e.stopPropagation();
 
     if ($subnav.hasClass('is-shown')) {
       $subnav.removeClass('is-shown');
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index 676914379c..29efb359c0 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -151,8 +151,12 @@
       font-weight: 600;
       color: $gray-d3;
 
-      &:hover, &:active {
+      &:hover, &:active, &.is-selected {
         color: $blue;
+
+        .icon-expand {
+          color: $blue;
+        }
       }
 
       .label-prefix {
@@ -160,14 +164,6 @@
         @include font-size(11);
         font-weight: 400;
       }
-
-      &.is-selected {
-        color: $blue-d1;
-
-        .icon-expand {
-          color: $blue-d1;
-        }
-      }
     }
 
     // specific nav items
@@ -548,6 +544,7 @@ body.signin .nav-not-signedin-signup {
   .nav-dropdown {
 
     .nav-item .title {
+      outline: 0;
       cursor: pointer;
     }
   }