Кастомизация меню на 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
Если помог
