Как выделить цветом один пункт меню

Недавно один заказчик попросил как-нибудь выделить один из пунктов горизонтального меню, а именно «АКЦИИ». В принципе, наверняка есть какие-нибудь более вменяемые способы чем тот, который использовала я, но для меня было важным сделать это быстро и без лишних заморочек…

Понятно, что поменять стиль для одного пункта меню привычным для нас способом — прописать CSS для тега  <?php wp_nav_menu(); ?> — не получится. Это работает только в том случае, если у вас одно место для меню на сайте. Если у вашего шаблона предусмотрено несколько мест для расположения меню, то данный способ может вызвать конфликт между ними.

Описываю самый простой и очевидный способ:

Заходим в консоли (админке) сайта на вкладку «ВНЕШНИЙ ВИД» — «МЕНЮ» и подключаем в самом верху в «НАСТРОЙКАХ ЭКРАНА» классы CSS:

Далее кликаем на пункт меню который хотим изменить, находим там окошко «Классы CSS (необязательно)» и прописываем в нём любой термин. Я присвоила название стилю:  about

Теперь дело за малым — прописать сам стиль плашки меню, а именно поменять цвет у одной вкладки меню «АКЦИИ». Для этого в консоли (админке) сайта открываем «ВНЕШНИЙ ВИД» — «ДОПОЛНИТЕЛЬНЫЕ СТИЛИ» и привязываем стиль к нашему обозначению: about Я хочу плашку выделить красным цветом, поэтому беру значение: #f5051b.

.about a { background: #f5051b; }

Вот как это будет выглядеть:

Если у кого-то есть более простой вариант, пишите в комментариях, буду благодарна. Удачи в сайтостроении…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Докажи, что не бот! *