Липке (fixed) меню – це популярний елемент дизайну веб-сайтів, який залишається видимим на екрані прокручування сторінки. Вони забезпечують зручну навігацію для користувачів, особливо коли контент сторінки займає багато місця.

У цій статті ми розглянемо, як створити липке меню зі зміною кольору під час прокручування на Elementor за допомогою CSS.

Крок 1: Написання CSS-коду

Тепер нам знадобиться CSS-код, щоб зробити наше меню липким і змінювати колір фону під час прокручування.

selector.elementor-sticky–effects{
background-color: rgba (91, 146, 255)!
}

selector{
transition: background-color 2s ease !important;
}

selector.elementor-sticky–effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

Крок 2: Застосування CSS-коду на Elementor

Щоб застосувати наш CSS-код на Elementor, виконайте такі дії:

У режимі редагування сторінки знайдіть розділ “Додаткові налаштування” або “Додаткові класи” для меню. Якщо такого розділу немає, перевірте налаштування кожного елемента меню окремо.

У секції вибираємо: ефект руху – прилипати – верх.

Зміщення ефектів: “20”, щоб ефект зміни кольору спрацьовував не відразу на місці.

Збережіть зміни та перегляньте результат.

Висновок:

Створення липкого меню зі зміною кольору під час прокручування на Elementor з використанням CSS – це відмінний спосіб покращити візуальну привабливість вашого веб-сайту та забезпечити зручну навігацію для користувачів.

Не забувайте експериментувати з різними стилями та ефектами, щоб підігнати липке меню під дизайн вашого сайту.

Сподіваюся, ця стаття допомогла вам створити липке меню зі зміною кольору під час прокручування на Elementor з використанням CSS.