1 files changed, 12 insertions, 11 deletions

diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 937638d50e8..847fc8c0792 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -27,17 +27,18 @@
         color: $black;
         border-bottom: 2px solid $gray-darkest;
 
-        .badge {
+        .badge.badge-pill {
           color: $black;
         }
       }
     }
 
-    &.active a {
+    &.active a,
+    a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
 
-      .badge {
+      .badge.badge-pill {
         color: $black;
       }
     }
@@ -56,7 +57,7 @@
     white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }
@@ -80,7 +81,7 @@
     }
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
 
       &.mobile-separator {
@@ -124,13 +125,13 @@
       position: relative;
 
       /* Medium devices (desktops, 992px and up) */
-      @media (min-width: $screen-md-min) { width: 200px; }
+      @include media-breakpoint-up(md) { width: 200px; }
 
       /* Large devices (large desktops, 1200px and up) */
-      @media (min-width: $screen-lg-min) { width: 250px; }
+      @include media-breakpoint-up(lg) { width: 250px; }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       padding-bottom: 0;
       width: 100%;
 
@@ -172,7 +173,7 @@
     .nav-controls {
       width: auto;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         width: 100%;
       }
     }
@@ -192,7 +193,7 @@
     width: 100%;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-flow: row wrap;
 
     .nav-controls {
@@ -352,7 +353,7 @@
     max-width: 300px;
     width: auto;
 
-    @media(max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 250px;
     }
   }