Исправление вашего отзывчивого меню навигации в Divi

Создание адаптивного меню навигации, которое отлично смотрится на экранах любого размера, может оказаться трудным. Хотелось бы, чтобы это было не так важно, но поскольку навигация обычно находится в верхней части каждой страницы вашего сайта, это то, что отображается первым на каждой странице. Поэтому важно сделать все правильно. К счастью, настройщик тем Divi позволяет настраивать главное меню с помощью некоторых довольно интересных параметров заголовка. Но для стиля меню по умолчанию с логотипом слева и ссылками меню справа все может легко перетасоваться на экранах меньшего размера, особенно когда у вас слишком много ссылок, заполняющих заголовок. Я знаю, что со мной такое случается часто. Я получаю меню, которое идеально подходит для рабочего стола, а затем вы проверяете его на планшете (особенно iPad Pro), и логотип перекрывает меню, а некоторые ссылки переходят на одну строку вниз.

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

Давайте начнем.

Исправление вашего отзывчивого меню навигации в Divi

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

Четыре решения для переполненного меню навигации

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

Эта проблема

Наиболее частая проблема, с которой я сталкиваюсь при использовании меню навигации по умолчанию Divi, - это когда клиенту нужно много пунктов меню верхнего уровня. Наличие более 5 пунктов меню (или наличие пунктов меню с большим размером шрифта) в главном меню навигации часто приводит к разрыву строки и увеличению логотипа, когда размер экрана достигает ширины между 980-1100 пикселей (размер небольших ноутбуков и большие планшеты). Я уверен, что у вас была эта проблема раньше, даже если вы никогда этого не замечали. Выглядит это примерно так:

Не идеально. Итак, давайте рассмотрим четыре решения этой проблемы.

Решение №1: Сделайте панель меню полной шириной

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

Перейдите в « Настройщик тем»> «Заголовок и навигация»> «Основная строка меню» и выберите « Сделать полной шириной» .

Решение №2: Отрегулируйте настройки логотипа и шрифта.

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

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

Решение №3: Отображение мобильного меню в новой точке останова.

Вот общие диапазоны для каждой точки останова в Divi:

Большой рабочий стол: 1405 пикселей и выше
Стандартный рабочий стол: от 1100 до 1405 пикселей.
Ноутбуки и большие планшеты: от 980 до 1100 пикселей.
Планшеты: от 768 до 980 пикселей.
Смартфоны и маленькие планшеты: от 320 до 768 пикселей;
Смартфоны: от 320 до 480 пикселей;

Точка останова, в которой меню навигации по умолчанию превращается в мобильное меню (с навигацией гамбургера), составляет 980 пикселей. На любом экране размером менее 980 пикселей будет отображаться мобильное меню.

Но если вы хотите избежать каких-либо странных разрывов строк меню, вы меняете точку останова на другое значение. Допустим, вы хотите отображать мобильное меню с разрешением около 1024 пикселей вместо 980 пикселей. Для этого вам нужно будет вставить некоторый собственный CSS в медиа-запрос, чтобы переопределить стиль по умолчанию в Divi.

Перейдите в « Настройщик тем» > « Дополнительные CSS» и введите следующее:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

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

Решение # 4: настройка стиля меню в определенной точке останова

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

Вот CSS-код Divi по умолчанию для ваших пунктов меню:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Допустим, вы хотите, чтобы размер шрифта вашего меню был 18 пикселей по умолчанию, но вы хотите, чтобы он изменился на 14 пикселей в определенной точке останова. А чтобы сэкономить еще больше места, вы можете уменьшить отступ до 15 пикселей вместо 22 пикселей. Вы можете сделать это, выбрав класс css для всех пунктов меню и создав медиа-запрос.

Перейдите в « Настройщик тем»> «Дополнительные CSS» и введите следующее:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

Этот CSS изменяет размер шрифта на 14 пикселей и правый отступ на 15 пикселей на любом экране размером 1200 пикселей или меньше. Это создает плавный переход при настройке размера экрана на рабочем столе и позволяет сохранить навигацию по умолчанию на больших планшетах и ​​маленьких ноутбуках.

Настройка других стилей заголовков

В настройщике тем Divi можно выбрать один из пяти стилей заголовков (не считая вертикальной навигации). Пять стилей включают в себя стандартный (тот, который уже упоминался в этом посте), вставной, полноэкранный, центрированный и встроенный логотип по центру.

Скользящие и полноэкранные стили

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

Центрированный стиль

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

Стиль встроенного логотипа по центру

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

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

Обратите внимание, как логотип немного смещен по центру в меню по сравнению с центрированным логотипом в разделе заголовка.

Теперь я собираюсь сократить метку пункта меню «Информационные элементы» до «Информация». Теперь посмотрите, как логотип смещается ближе к центру.

Это решение может быть всем, что вам нужно, чтобы разместить логотип там, где вы хотите. Возможно, вам удастся изменить что-то вроде «О нас» на «О нас» или наоборот, чтобы внести эти небольшие изменения.

Но это может немного расстроить, если вы перфекционист (у меня могут быть свои моменты. Поверьте мне.) Итак, есть более глубокий уровень настройки, который вы можете сделать, если хотите внести еще больше настроек. Вместо того, чтобы настраивать фактический текст в элементе меню для настройки центральной точки логотипа, вы можете добавить собственный класс css к любому элементу и дать ему отступ вправо или влево. Это должно дать вам последний толчок, необходимый для того, чтобы все было по центру.

На панели инструментов WordPress перейдите в Внешний вид> Меню и убедитесь, что у вас отмечены классы CSS в области параметров экрана.

Затем переключите, чтобы открыть пункт меню, на который вы хотите настроить таргетинг. Затем введите класс CSS в поле ввода «Классы CSS». Я называю свое «подталкивание».

После этого перейдите в Divi> Theme Customizer> Additional CSS и добавьте следующий настраиваемый CSS:

#top-menu li.nudge  {
padding-right: 32px;
}

В этом CSS только элемент с классом «nudge» получает правый отступ 32 пикселя; Это подталкивает логотип настолько, чтобы он располагался по центру.

Вот и все!

Заключительные мысли

Divi делает создание веб-сайтов увлекательным и простым. Но иногда требования работы (и наших клиентов) требуют, чтобы мы приложили все усилия, чтобы убедиться, что наши сайты великолепны. И то, что отличает хорошие сайты от хороших, - это мелкие детали. То, как работает ваше адаптивное меню навигации, - одна из тех важных деталей, которые вы хотите уточнить. В большинстве случаев это первое, что пользователи видят на каждой странице вашего сайта. Неудачно выглядящее меню может оставить плохое первое впечатление. Я надеюсь, что этот пост поможет «подтолкнуть» вас в правильном направлении (извините, ничего не смог с собой поделать :)).

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

Ваше здоровье!