Изменение цвета гамбургер-меню на мобильных

Все сайты на 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