Highlighting Current Page in Nav_Menu (WordPress) /w SASS

Question

I am trying to change the color of the text of my Navigation Menu.

Here is my CSS Code:

        li {
           a {
               color: $color4;
               text-decoration: none;
               display: block;
               padding: 0.25rem 5rem 0rem 0rem;
               font-size: 1.2rem;
               font-weight: bold;

               &:hover {
                   color: $color5;
               }

           }

           &.current-menu-item {
               color: $color5 !important;
               background:blue;
           }
        }

I am using SASS instead of just CSS.

The issue is that the .current-menu-item gets the background of blue, but the text color does not seem to change, even with the infamous !important.

I know the class is correct, but I can't seem to override the a{}.

Any advice?

Answer 1

I think your problem is that you are defining the color property on two different elements, the first time on the a and the second on the li.

You can try defining the color directly on the li and make the a inherit it:

li {
   color: $color4;

   &:hover {
       color: $color5;
   }

   &.current-menu-item {
       color: $color5;
       background:blue;
   }

   a {
       color: inherit;
       text-decoration: none;
       display: block;
       padding: 0.25rem 5rem 0rem 0rem;
       font-size: 1.2rem;
       font-weight: bold;
   }
}

If this does not work, maybe some other style definition is overriding yours. In this case you should inspect your page with your browser inspector to see if any other style is defined for these elements elsewhere.