Как совместить панель меню рабочего стола и мобильного устройства с Divi

В сегодняшнем посте Divi мы собираемся поделиться советом, который поможет вам улучшить свой мобильный дизайн. Все мы знаем, что ваш дизайн на мобильном телефоне так же важен, как и на рабочем столе, но из-за некоторых стандартных настроек в Divi не все изменения, которые вы вносите в настройщике тем, выглядят на рабочем столе так же, как на мобильном телефоне.

В частности, мы собираемся показать вам, как создать небольшую строку мобильного меню, которая будет выглядеть так же, как строка меню на рабочем столе, при использовании максимальной высоты логотипа и минимальной высоты меню. По умолчанию взгляды на мобильные устройства и настольные компьютеры различаются. Тот факт, что вы установили определенную высоту меню и максимальную высоту логотипа, не означает, что то же самое применимо и к мобильным устройствам.

Разница для мобильных и настольных ПК

Есть множество веб-сайтов, которые сознательно выбирают основную строку меню не такой большой высоты. Он просто выглядит более элегантно и занимает меньше места, что определенно интересно рассмотреть, если вы также используете фиксированную навигацию.

Когда вы выбираете максимальное значение для максимальной высоты логотипа (100) в настройщике темы и минимальное значение для высоты меню (30), на рабочем столе вы получите следующий результат:

Однако пропорции логотипа и высота меню для мобильных устройств отличаются. Если вы выбрали максимальное значение для максимальной высоты логотипа и минимальное значение для высоты меню, вы не получите того же результата, что и на рабочем столе. Вместо этого вы получите следующий результат:

Результат

Теперь то, что мы собираемся сделать, - это показать вам, как применить тот же макет к строке меню вашего мобильного устройства. Это означает, что логотип будет иметь максимальную высоту в меню. Кроме того, сама строка меню будет намного меньше. В конце концов, у вас будет больше места на экране для отображения содержимого на вашей странице.

Выполнив пошаговое руководство по этому руководству, вы получите следующий результат:

Что, очевидно, больше похоже на настольную версию:

Как совместить панель меню рабочего стола и мобильного устройства с Divi

Подпишитесь на наш канал Youtube

Настройки основной панели меню

Первое, что мы собираемся сделать, это внести необходимые изменения в основную строку меню в настройщике темы. Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Заголовок и навигация»> «Основная панель меню» и убедитесь, что применяются следующие настройки:

• Скрыть изображение логотипа: отключить
• Высота меню: 30
• Максимальная высота логотипа: 100

Строка мобильного меню Дополнительный код CSS

Следующее, что нам нужно сделать, это добавить дополнительный код CSS, чтобы строка меню мобильного устройства выглядела так же, как строка меню на рабочем столе. Мы можем добавить CSS-код, в частности, на одну страницу (если мы просто хотим отображать меню таким образом только на определенных страницах) или на весь веб-сайт. Как правило, вы применяете код CSS ко всему веб-сайту, чтобы поддерживать необходимую согласованность на своем веб-сайте, но это зависит от вас.

В частности, добавьте CSS-код на одну страницу

Чтобы добавить код CSS, в частности, на одну страницу, вам нужно открыть страницу в своей панели управления WordPress. При использовании конструктора Divi вам нужно будет щелкнуть в нем следующий значок:

Затем вы можете взять следующие строки кода CSS и поместить их в поле Custom CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Добавить код CSS на весь веб-сайт

Другой вариант, и, вероятно, тот, который будет использоваться чаще всего, - это добавление кода на весь ваш веб-сайт. Это можно сделать двумя способами.

Через настройщик темы

Первый способ - добавить CSS-код в настройщик тем. Для этого перейдите в панель управления WordPress> Внешний вид> Настроить> Дополнительный CSS> Поместите следующие строки кода CSS в поле Пользовательский CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Эта опция позволяет вам видеть изменения в реальном времени. Это, вероятно, самый интересный вариант, если вы собираетесь изменить некоторые вещи в коде и хотите увидеть, как это выглядит, прежде чем сохранять изменения.

Через параметры темы

Второй метод - это добавление кода CSS в параметры темы. Для этого перейдите в панель управления WordPress> Divi> Параметры темы> Прокрутите вниз вкладку Общие и поместите следующий код CSS в поле Пользовательский CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Измените код в соответствии с вашими предпочтениями

Конечно, это не единственный способ сделать мобильную панель меню похожей. Если вы применяете другие настройки к своей основной строке меню в настройщике темы, весьма вероятно, что вам также потребуется внести изменения в код CSS. Однако классы CSS и идентификаторы CSS, которые вы будете использовать, одинаковы.

Одна из вещей, которую вам обязательно нужно принять во внимание, - это верхнее заполнение контейнера страницы. Значение, которое мы присвоили в нашем коде CSS, соответствует другим внесенным нами изменениям. Однако, если вы измените значения в других классах, вам нужно будет убедиться, что верхний отступ остается правильным. Самый простой способ сделать это - начать с более высокого значения и изменять его до тех пор, пока вы не увидите, как контейнер страницы встал на место.

Результат

Если вы следовали этому руководству шаг за шагом, вы должны были достичь следующего результата для своей мобильной панели меню:

Что выглядит почти так же, как результат, полученный на настольных компьютерах:

Прежде чем вносить какие-либо изменения CSS, результат на мобильном устройстве будет выглядеть следующим образом:

Последние мысли

В этом посте мы показали вам, как сделать мобильную панель меню меньше и соответствовать строке меню на настольных компьютерах. Вы можете просто добавить необходимый код CSS на страницу в частности или на весь веб-сайт, чтобы этот метод работал. Если у вас есть вопросы или предложения; обязательно оставьте комментарий в разделе комментариев ниже!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!