Cómo hacer que la navegación estándar y vertical se superponga en su sitio web Divi

En esta publicación, le mostraremos cómo combinar la navegación estándar y vertical. Más específicamente; cómo hacer que el menú secundario y el pie de página se superpongan con la navegación vertical en su sitio web. Eso significa que no tendrá que elegir entre tener una navegación superior o una navegación vertical; ¡Puedes hacer ambas cosas! Puede diseñar el menú principal y el menú secundario como desee dentro de su Personalizador de temas, eso no es lo que vamos a ayudarlo a lograr en esta publicación explícitamente. Más bien, le mostraremos las siguientes cosas que ayudan en el proceso de hacer las siguientes cosas:

• cómo hacer que su menú secundario se superponga a su navegación vertical
• cómo hacer que su menú secundario sea fijo al desplazarse
• cómo hacer que el pie de página se superponga a la navegación vertical

Estas son todas las cosas que le ayudarán a crear un buen equilibrio entre la navegación estándar y vertical en su sitio web. Al hacer que la navegación estándar y vertical se superpongan, su sitio web no se sentirá como si estuviera dominado por la navegación vertical. El contenido principal de su sitio web se ajustará a la navegación vertical, pero el menú secundario y el pie de página se comportarán de la misma manera que cuando la navegación vertical no está habilitada.

Resultado

Al final de este tutorial, podrá lograr el siguiente resultado en un sitio web que utilizó navegación vertical:

La inspiración para la navegación vertical y estándar superpuesta

En una publicación anterior, compartimos algunos ejemplos de sitios web que usan la navegación vertical. Todos los ejemplos nos mostraron cuán creativo puede ser con una opción Divi que no se usa con tanta frecuencia. Una navegación vertical bien pensada en su sitio web puede brindar esa interacción adicional que estaba tratando de lograr con sus visitantes.

Al mostrar los ejemplos, hubo algunos comentarios que nos inspiraron a mostrarte cómo lograr ciertos resultados. Esta publicación es uno de esos tutoriales basados ​​en inspiración que le mostrarán cómo realizar algunos ajustes en su sitio web sin tener que buscar soluciones usted mismo.

Nos hemos inspirado en el sitio web de Alex Brands que utiliza el menú secundario en la parte superior y la navegación vertical en el lado izquierdo de la página.

Mientras se desplaza, el menú secundario se desplaza. Le da ese toque extra agradable al sitio web y ayuda a mantener el foco en el contenido dentro del menú secundario. Alex Brands es un sitio web de comercio electrónico y el menú secundario fijo ayuda a recordar a las personas lo que hay en su cesta de la compra y la oferta que ofrecen.

Este tipo de navegación vertical es especialmente interesante para los sitios web de comercio electrónico. La navegación vertical facilita a los visitantes la navegación a través de las diferentes categorías de elementos que se ofrecen en el sitio web. Es más fácil seguir los elementos del menú cuando están ubicados en una navegación vertical, ya que es más fácil interpretarlos como una lista por la que deben pasar las personas.

Cómo hacer que la navegación estándar y vertical se superponga en su sitio web Divi

Suscríbete a nuestro canal de Youtube

Pasos generales

Antes de sumergirnos en la parte donde le mostramos cómo hacer que su navegación estándar se superponga a su navegación vertical, primero veremos los pasos generales. Estos pasos generales son la base que deberá seguir antes de aplicar la superposición.

Sin más adeudos; empecemos.

Cree su menú y agregue elementos de menú

Lo primero que debe hacer (si aún no lo ha hecho) es agregar un menú y los elementos del menú a su sitio web. Estos son los elementos del menú que aparecerán dentro de su navegación vertical. Para agregar un nuevo menú a su sitio web, vaya a su Tablero de WordPress> Apariencia> Menús. Una vez que esté en esa página, asigne un título a su nuevo menú y cree el menú.

Continúe agregando elementos de menú y convirtiéndolo en su menú principal.

Agregar íconos sociales al menú secundario

Lo siguiente que deberá hacer es activar su menú secundario. Para asegurarse de que el menú secundario aparezca en su sitio web, su menú secundario debe tener un elemento que esté activado. En esta publicación, solo agregaremos los íconos de redes sociales, pero, por supuesto, puede agregar lo que quiera.

Para activar el menú secundario y hacer que aparezcan los íconos sociales, comience yendo a su Tablero de WordPress> Personalizar> Encabezado y navegación> Elementos del encabezado> Habilite la opción 'Mostrar iconos sociales'.

Activar navegación vertical

El siguiente paso que deberá tomar es habilitar la navegación vertical dentro de su constructor Divi. Para hacerlo, vaya a su Tablero de WordPress> Apariencia> Personalizar> Encabezado y navegación> Formato de encabezado> Habilitar la navegación vertical.

Además de eso, también puede elegir dónde desea que aparezca su navegación vertical; en el lado izquierdo o derecho de su sitio web.

Deshabilite la navegación fija para su menú principal

Antes de pasar a las modificaciones avanzadas, queda una última cosa por hacer: deshabilitar la navegación fija para su menú principal. Si ya ha desactivado el menú principal, omita este paso. Sin embargo, si su menú principal está arreglado actualmente, vaya a su Tablero de WordPress> Divi> Opciones de tema> Y desactive la navegación fija.

Combinar navegación estándar y vertical

En la siguiente parte de esta publicación, le mostraremos cómo convertir su navegación estándar y vertical en algo diferente de lo habitual. Cuando se trata de navegación vertical, estamos acostumbrados a ver una parte de la pantalla cubierta por ella. El menú secundario y el pie de página, de forma predeterminada, no pasarán la navegación vertical.

Pero en algunos casos, queremos asegurarnos de que la navegación secundaria y el pie de página estén encima de la navegación vertical. De esa forma, lo único que dependerá de la navegación vertical es el contenido principal. Su sitio web no se sentirá como si estuviera completamente dividido en dos lugares; la navegación vertical y el resto del sitio web.

Agregar código CSS a las opciones del tema

Puede agregar el código CSS de dos maneras: a través de las Opciones de tema de Divi o mediante el Personalizador de temas. Para agregar el código a las Opciones de tema, vaya a su Tablero de WordPress> Divi> Opciones de tema> General> Desplácese hacia abajo en la pestaña y pegue las siguientes líneas de código CSS en el cuadro CSS personalizado:

@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;
}}

Agregar código CSS al personalizador de temas

La otra posibilidad que tiene es agregar las líneas de código CSS al Personalizador de temas. Para hacerlo, vaya a su Tablero de WordPress> Apariencia> Personalizar> CSS adicional> Y pegue las líneas CSS en el campo CSS personalizado:

@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;
}}

Pensamientos finales

En esta publicación, le mostramos cómo combinar la navegación estándar y vertical en su sitio web. Más precisamente; le mostramos cómo hacer que el menú secundario y el pie de página se superpongan a su navegación vertical y cómo hacer que su menú secundario sea fijo. Si tiene alguna pregunta o sugerencia; ¡No dude en dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Line design / shutterstock.com