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

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



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

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

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

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

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



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



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



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



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



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

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



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

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

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


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

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

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

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



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



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



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



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



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



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



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

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

Чи була ця стаття корисною?
Скасувати
Дякуємо!