Выделение текущей страницы в Nav_Menu (WordPress) / w SASS - PullRequest
Новая
       18

Выделение текущей страницы в Nav_Menu (WordPress) / w SASS

0 голосов
/ 16 октября 2019

Я пытаюсь изменить цвет текста моего меню навигации.

Вот мой код CSS: 

        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;
           }
        }

Я использую SASS вместо просто CSS.

Проблема в том, что элемент .current-menu-item получает фонсинего цвета, но цвет текста, кажется, не меняется, даже при печально известной важности.

Я знаю, что класс правильный, но я не могу переопределить a {}.

Любой совет?

Ответы [ 2 ]

0 голосов
/ 16 октября 2019

Джузепедопонт был прав.

Но я заставил меня работать по-другому: 

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 {
            a {
                color: $color5;
            }

        }
    }

Разница в том, что я добавил вложенный {} в выбранный класс.

0 голосов
/ 16 октября 2019

Я думаю, что ваша проблема в том, что вы определяете свойство color для двух разных элементов: первый раз для a и второй для li.

Вы можете попробовать определитьцвет непосредственно на li и заставить a наследовать его: 

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;
   }
}

Если это не сработает, возможно, какое-то другое определение стиля переопределяет ваше. В этом случае вам следует проверить свою страницу с помощью инспектора браузера, чтобы узнать, определен ли какой-либо другой стиль для этих элементов где-либо еще.

...