Style menu bar active link

scss/sections/_progress_menu.scss

@@ -36,17 +36,18 @@
       position: relative;
       padding: ($gap * 4) ($gap * 2);
       margin: 0 ($gap * 2);
-      color: $color-black;
       text-decoration: none;
       text-align: center;
       z-index: 2;
-
-      &:hover {
-        color: $color-blue;
-      }
-
+      color: $color-black;
     }
 
+    a.active {
+      color: $color-blue;
+    }
+
+
+
     &:first-child:after {
       display: none;
     }
@@ -100,7 +101,3 @@
 
   }
 }
-
-.nav-link--active {
-  color: $color-blue !important;
-}

templates/requests/menu.html.to

@@ -3,7 +3,7 @@
     {% for i,s in enumerate(screens) %}
     <li class="progress-menu__item">
       <a href="{{ reverse_url('request_form_update', i+1, request_id) if request_id else reverse_url('request_form_new',i+1) }}"
-        class="nav-link{% if matchesPath('/requests/new/'+str(i+1)) %}--active{% end %}"
+        {% if matchesPath('/requests/new/'+str(i+1)) %}class="active"{% end %}
       >
         {{ s['title'] }}
       </a>