Как совместить стандартную и вертикальную навигацию на вашем сайте Divi

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

• как сделать так, чтобы вторичное меню перекрывало вертикальную навигацию
• как исправить второстепенное меню при прокрутке
• как сделать так, чтобы нижний колонтитул перекрывал вертикальную навигацию

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

Результат

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

Вдохновение для совмещения стандартной и вертикальной навигации

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

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

Нас вдохновил веб-сайт Alex Brands, который использует дополнительное меню вверху и вертикальную навигацию в левой части страницы.

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

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

Как совместить стандартную и вертикальную навигацию на вашем сайте Divi

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

Общие шаги

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

Без дополнительной оплаты; Давайте начнем.

Создайте свое меню и добавьте пункты меню

Первое, что вам нужно сделать (если вы еще этого не сделали), - это добавить меню и элементы меню на свой веб-сайт. Это элементы меню, которые появятся в вашей вертикальной навигации. Чтобы добавить новое меню на свой сайт, перейдите в панель управления WordPress> Внешний вид> Меню. Как только вы окажетесь на этой странице, дайте своему новому меню заголовок и создайте меню.

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

Добавить социальные иконки в дополнительное меню

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

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

Активировать вертикальную навигацию

Следующий шаг, который вам нужно сделать, - включить вертикальную навигацию в вашем конструкторе Divi. Для этого перейдите в панель управления WordPress> Внешний вид> Настройка> Заголовок и навигация> Формат заголовка> Включить вертикальную навигацию.

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

Отключите фиксированную навигацию для основного меню

Прежде чем мы перейдем к расширенным модификациям, осталось сделать еще одно: отключить фиксированную навигацию для вашего основного меню. Если вы уже отключили главное меню, пропустите этот шаг. Если, однако, ваше основное меню в настоящее время исправлено, перейдите в панель управления WordPress> Divi> Параметры темы> и отключите фиксированную навигацию.

Совместите стандартную и вертикальную навигацию

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

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

Добавить код CSS в параметры темы

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

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Добавить код CSS в настройщик тем

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

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

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

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

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

Изображение от Line design / shutterstock.com