Кастомизация меню на WordPress

Кастомизация меню на WordPress. Как настроить меню на WordPress.

Кастомизация меню на WordPress

— Не здрасте.

Ага не обычное начало? А вот урок сегодня очень нужный каждому кто занимается создание сайтов на WordPress, хотя речь в нем пойдет о самом обычном меню.

И так чего мы сегодня научимся делать?

  • Как задать цвет текста всему меню
  • Как выделить 1 пункт меню цветом
  • Как сделать пункты меню разными цветами
  • Изменить общий цвет меню
  • Сделать подчеркивание при наведении в меню
  • Как изменить цвет фона пункта меню при наведении
  • Сделать увеличение при наведении
  • Сделать разный цвет при наведении на разные пункты меню
  • Как сделать фиксированное меню
  • Как сделать чтобы при скроллинге меню меняло фон и размер
  • Как сделать меню во всплывающем окне
  • Как сделать выезжающее боковое меню


Если видео не отображается перейдите по ссылке https://youtu.be/IvVKpa8sC-o
Иногда нужно выкрасить первый пункт меню, например, в красный и сделать жирным. Нужно было это одному заказчику, зачем не понятно, но надо. Что я только не находил и при помощи хуков на php и java и какие только конструкции не использует народ для такого простого решения.

Вся загвоздка в том, что классы первого второго и последующих пунктов одинаковы и при помощи css это казалось сделать нельзя.

Решил очень просто. При создании меню в WordPress, в место привычного названия пункта меню ГЛАВНАЯ вставил HTML код и получилось

<span style=»color: #ff0000;»><strong>ГЛАВНАЯ</strong></span>. Поле для ввода названия пункта меню при создании меню в WordPress понимает HTML и это дает возможность форматировать названия пунктов, как угодно.

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

/*Раскрасили меню*/

.menu-item-46 a {
color:red;
}
.menu-item-47 a {
color:green;
}
.menu-item-48 a {
color:blue;
}
.menu-item-49 a {
color:cyan;
}
.menu-item-50 a {
color:violet;
}
.ast-primary-header-bar {
background-color: #000000;
}
.menu-item:hover a
{
color:white;
text-decoration:underline;
font-size:20px;
}
.menu-item-50:hover
{
background-color: #ff6600
}
.menu-item-46:hover
{
background-color: #ff6600
}
.menu-item-47:hover
{
background-color: red
}
.menu-item-48:hover
{
background-color: green
}
.menu-item-49:hover
{
background-color: cyan
}

/*зафиксировать меню*/
.main-header-bar-wrap {
position: fixed;
display: block;
width: 100%;
}
Само собой классы меняем на свои.

 

Как сделать чтобы меню прилипало сверху и меняло цвет при скроллинге.

Как зафиксировать меню если нет Elementor Pro

В видео я показываю, как сделать это двумя способами. Сначала просто чистый css и второй способ — это плагин.

Смотрите видео а Код для этих целей чтоб не писать можете скопировать

/*зафиксировать меню*/

.main-header-bar-wrap {

position: fixed;

display: block;

width: 100%;

}

Поменяйте только класс на свой

А еще есть второй вариант. Я просто использовал бесплатный плагин Sticky Header Effects for Elementor. В этом плагине есть галочка которая позволяет фиксировать меню. Так же этот плагин позволяет менять цвет меню при скроллинге, прятать меню при прокрутки вниз и доставать при прокрутке вверх

Если что не понятно пишите в комментах, или бронируйте консультацию тут https://e-integrate.ru/bronirovanie-konsultatsii-po-skajpu/ найдем выход из любой ситуации.

Мой курс по созданию сайтов https://e-integrate.ru

Если помог

 

Узнайте первым о выходе новых статей

Подпишитесь на рассылку чтобы получать проверенные полезные фишки по созданию сайтов. В хозяйстве пригодится, не пожелеете!

Друзья, если смог помочь, перечислите 100 рублей на постройку кораблей!

Запись на бесплатное пробное занятие

Вы очень любознательны. Иначе бы не нажали на эту кнопку