Зміна кольору гамбургер-меню на мобільних пристроях

Усі вебсайти на Weblium автоматично підлаштовуються до різних розмірів екрану. Редактор автоматично створює мобільну версію на основі всіх блоків та елементів, які ви додали на сайт.

Оскільки навігаційне меню в шапці сайту може займати занадто багато місця або бути замалим для перегляду та натискання, на мобільних пристроях їхній вміст приховується у так званому гамбургер-меню:



Підказка: для отримання додаткової інформації щодо логіки цієї адаптації перегляньте статтю Відображення сайтів на мобільних пристроях.

У цій статті ми покажемо, як змінити колір іконки та фону в гамбургер-меню.

Зміна кольору іконки меню бургера через кольорову палітру

Колір іконки гамбургер-меню на мобільних пристроях залежить від темного або світлого відтінку кольорової палітри вебсайту. Якщо у шапки сайту темний фон, гамбургер-меню матиме колір світлого відтінку з палітри, а якщо у шапки сайту світлий фон, то відповідно гамбургер-меню матиме колір темного відтінку з палітри.

Ось приклад темного фону шапки сайту:



Отже, гамбургер-меню матиме світлий відтінок із палітри:



Щоб змінити цей колір, увійдіть у редактор, натисніть на три крапки на панелі інструментів та відкрийте вкладку Стиль сайту:



У вкладці Кольори наведіть курсор на поточну палітру сайту та натисніть Редагувати:



У відкритому вікні змініть Світлий або Темний відтінок на бажаний та натисніть Готово:



Опублікуйте сайт, аби зберегти зміни.

Тепер зображення гамбургер-меню матиме обраний колір:

Зміна кольору іконки меню бургера через додавання коду

Якщо ви хочете встановити довільний колір іконки гамбургер-меню, не прив'язуючись до палітри свого сайту, додайте у розділ CSS наступний код:

@media (max-width: 992px){
    #header ~ header span[class*="w-burger__line"] {
        background-color: rgb(255,255,255);
    }
}

У частині #header на місці слова "header" (перша згадка цього слова в коді) має бути назва якоря шапки сайту, в якій розташоване потрібне гамбургер-меню:


Зазвичай, якщо у вас на сайті була лише 1 шапка сайту, то для неї код відразу буде такий, як вище. Якщо ви додавали інші шапки сайту, у них у коді вже буде #header-1 ~ header, #header-2 ~ header тощо.

Параметр rgb(255,255,255) визначає колір іконки, і в цьому прикладі він стане білим. Ви можете отримати код потрібного вам кольору за допомогою цього сервісу.

Зміна кольору фону гамбургер-меню

Якщо ви використовуєте глобальну прозору шапку сайту на сайті, гамбургер-меню все одно матиме кольоровий фон, коли відвідувач вашого сайту відкриє його.

Наприклад, ось як виглядає шапка сайту в мобільній версії:



І ось як вона виглядає гамбургер-меню:



Аби змінити цей колір, наведіть курсор на шапку сайту та натисніть на «шестерню», щоб перейти до налаштувань:



Вимкніть опцію Зробити шапку прозорою:



Далі перейдіть до налаштувань рядка, де розміщено меню навігації:



Відкрийте вкладку Фон та виберіть колір для фону гамбургер-меню:



Поверніться до налаштувань шапки сайту та зробіть її знову прозорою:



Опублікуйте сайт, аби зберегти всі зміни.

Готово! Колір фону в гамбургер-меню тепер буде відповідати фону рядка:

Оновлено: 05/12/2023