Storefront: стилизация главного меню
-
Доброго дня,
Нужен экспертный совет по поводу кастомизации главного меню темы Storefront при помощи голого CSS
Дано: сайт на WordPress + WooCOmerce, тема Storefront
Установлен плагин Custom CSS при помощи которого уже много чего удалось поправить/подтюнить под свои сомнительные вкусы.Что пытаюсь сделать: пытаюсь добавить эффект подчеркивания при наведении на пункт меню.
Код эффекта выглядит так:
HTML
<a href="#">Link Hover Effect</a>
CSSa { 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, поясните плииз что я делать не такСтраница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
-
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; }}
- Тема «Storefront: стилизация главного меню» закрыта для новых ответов.