Как сделать активные элементы меню разного цвета WordPress

Всем привет!

В этой статье я расскажу и покажу как поменять цвет активных элементов меню WordPress.

И не только всех элементов, но и каждого по отдельности. То есть каждый элемент будет иметь свой цвет. Как, например, у меня на сайте:

Этот способ подходит практически для всех известных тем вордпреса, таких как Twenty Nineteen, Bard и т.д…

Я прошерстил очень много информации в интернете, прежде чем разобрался как это сделать, особенно для каждого отдельно элемента меню. И сейчас поделюсь с вами, как пошагово это сделать. Поехали!

Как сделать все активные элементы меню одного цвета:

1. Кликаем на элемент меню, чтобы сделать его активным. Затем, нажимаем «F12» на клавиатуре, откроется консоль, затем на значок выбора элемента и узнаем код активного элемента меню, путем нажатия на него мышкой

2. В исходном коде выделится строчка, которая относится к данному элементу меню с ссылкой на него. Внизу, в таблице стилей вы увидите, какие стили отвечают за цвет активного элемента меню:

Хотя черным выделился другой, не нужный нам класс, красным я выделил именно тот класс, который отвечает за активный элемент меню. Именно его и нужно использовать, без вот этого «> a» на конце, запомните!

3. Заходим в админке: «Внешний вид» -> «Настроить» -> «Настройки темы» -> «Настройки стилей»

4. И внизу, в поле «Пользовательский CSS» прописываем такую строчку: .current-menu-item a {color: #fff !important; background: #000 !important;}

  • .current-menu-item — это класс, который отвечает за активный элемент меню
  • a — это тип ссылок, которые относятся к классу выше. То есть элементы меню по факту являются ссылками, а не текстом, или заголовком, поэтому мы прописываем здесь «a«
  • color — отвечает за цвет текста
  • background — за цвет фона, сам цвет это, что после «решетки» по таблице HTML цветов

5. Загуглите таблицу цветов, выберете нужный вам цвет и вставьте вместо моего. Нажмите «Опубликовать».

Я использовал белый цвет текста и черный фон и в итоге получилось:

если вы хотите, чтобы вместо цвета фона было определенное изображение, тогда нужно прописать дополнительно в background: background: url(*здесь ссылка на ваше изображение*) !important;

Как сделать каждый элемент меню разного цвета

Все тоже самое, только нужно прописать код для каждого активного элемента

1. Нажимаем «F12» на клавиатуре, выбираем значок выбора элемента и кликаем на элемент, который хотим изменить

2. В таблице элементов выделится строчка, которая относится к данному элементу меню с ссылкой на него. Нам нужно узнать номер этого элемента. Именно над этой строчкой ищем строки с номером элементов. Обычно название и номер элемента в списке идет после li id

В моем случае, номер — 118, а полное название элемента menu-item-118. Скопируйте это название у себя без кавычек

3. Заходим в админке в «Настройки стилей». В пользовательском CSS пишем #menu-item-118.current-menu-item a {color: #fff !important; background: #000 !important;}, только вместо menu-item-118 вставьте ваше название, которое вы скопировали

4. Нажимаем «Опубликовать» и вуаля! Теперь только конкретный активный элемент меню будет другого цвета

Вот, что у меня получилось, когда я для своего 118-го и 119-го элемента прописал такой код с белым текстом и с синим у одного и черным у другого фоном:

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

Вот так просто и легко изменить цвет любого элемента меню. Главное все правильно прописать и будет Щ И К А Р Н О!

До встречи в следующих статьях!

Оставить комментарий

Ваш адрес email не будет опубликован.