Поддержка Темы и шаблоны Storefront: стилизация главного меню

  • Доброго дня,

    Нужен экспертный совет по поводу кастомизации главного меню темы Storefront при помощи голого CSS

    Дано: сайт на WordPress + WooCOmerce, тема Storefront
    Установлен плагин Custom CSS при помощи которого уже много чего удалось поправить/подтюнить под свои сомнительные вкусы.

    Что пытаюсь сделать: пытаюсь добавить эффект подчеркивания при наведении на пункт меню.
    Код эффекта выглядит так:
    HTML
    <a href="#">Link Hover Effect</a>
    CSS

    a {
      position: relative;
     color: inherit;
      text-decoration: none;
     line-height: 24px;
      padding-top: 10px;}
     a:before {
        content: '';
        position: absolute;
        transition: transform .5s ease;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: black; /*или любой др цвет*/
       transform:  scaleX(0);}
    a:after {
        content: '';
        position: absolute;
        transition: transform .5s ease;
      }
    a:hover:before {
        transform:  scaleX(1);
      backgound: efefef;
      }

    Оно же в виде рабочей версии на codepen.io (надеюсь тут это не возбраняется)
    https://codepen.io/0LEg_mao/pen/qBbRaPB

    Теперь этот же код применительно к Worpress’у и теме Storefront

    @media (min-width: 768px){ul.menu > li > a {
      position: relative;
     color: inherit;
      text-decoration: none;
     line-height: 24px;
     
        }
    }
    
    @media (min-width: 768px){ul.menu > li > a:before  {
        content: '';
        position: absolute;
        transition: transform .5s ease;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: black;
        transform:  scaleX(0);
        }
    }
    
    @media (min-width: 768px){ul.menu > li > a:after {
        content: '';
        position: absolute;
        transition: transform .5s ease;
        }
    }
    
    @media (min-width: 768px){ul.menu > li > a:hover:before {
     transform:  scaleX(1);
        }
    }

    В браузере в инструментах разработчика (F12) вижу что примерились ВСЕ стили кроме a:hover:before.
    Т.е. не работает вот этот код
    CSS:

    @media (min-width: 768px){ul.menu > li > a:hover:before {
     transform:  scaleX(1) !important;
        }
    }

    Вариант a:hover::before пробовал — не работает.
    Имхо одно из 2х:
    либо я применяю код CSS не к тому классу в принципе
    либо заставить работать a:hover:before нужно как-то по другому.
    Гуру WordPress, поясните плииз что я делать не так

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 4 ответов — с 1 по 4 (всего 4)
  • transform: scaleX(1)

    Скажите пожалуйста, что по вашему должно делать это правило?

    Скажите пожалуйста, что по вашему должно делать это правило?

    По задумке оно должно, собственно, показать линию подчеркивания, которую нарисовали до этого и уменьшили по оси Х в 0.

    ладно.
    измените последнее правило на

    ul.menu > li:hover > a::before{
        transform:  scaleX(1) !important;
      }

    Спасибо!
    В итоге, чтоб оно заработало, нужно добавить еще одно правило:

    @media (min-width: 768px){.main-navigation ul li a::before {
        display: block !important;
      }}
Просмотр 4 ответов — с 1 по 4 (всего 4)