Cómo hacer que su navegación Divi comience en la parte inferior y luego permanezca fija en la parte superior cuando se desplaza

En el tutorial de Divi de hoy, le mostraremos, paso a paso, cómo hacer una navegación fija en su sitio web cuando se desplaza y después de haber pasado la altura de su pantalla completa. Si sigue los pasos de esta publicación y vuelve a crear la navegación fija, verá que la navegación traerá un efecto de interacción agradable a su menú principal y a su sitio web en general.

Comenzaremos creando una navegación vertical normal en la pantalla. En lugar de estar en la parte superior de la página, esta navegación se enviará a la parte inferior de la pantalla. Después de desplazarse y una vez que haya pasado la altura del menú de la pantalla, verá que el menú cambiará de posición y se colocará en la parte superior de la página. Una vez que la navegación se fija, permanecerá fija durante el resto de la página. Pero una vez que regrese a la sección de héroe, la navegación se comportará normalmente nuevamente y se colocará en la parte inferior de la sección de héroe.

Se podría decir que la página 'recogerá' el menú en la parte inferior de la pantalla y le dará ese efecto avanzado que está buscando. Para ayudarlo a visualizar el resultado que estamos tratando de lograr, echemos un vistazo al resultado final:

Sección Hero: módulo de encabezado de ancho completo con modo de pantalla completa

Hay una cosa a tener en cuenta cuando vas a utilizar este efecto para tu sitio web; necesita un módulo de encabezado en modo de pantalla completa. Teóricamente, también puede aplicar esto a otros módulos y secciones, pero tendrá que hacer algunas modificaciones para asegurarse de que el menú aparezca en la parte inferior de esa sección. La opción de pantalla completa que ofrece Divi asegura que la sección de héroe llene la pantalla (sean cuales sean las medidas de la pantalla), por eso recomendamos usarla si desea aplicar este efecto a su menú.

Comience abriendo o creando la página donde desea agregar este efecto. A continuación, abra el Encabezado de ancho completo o créelo y vaya a la pestaña Diseño. Lo primero que encontrará en la pestaña de diseño es la subcategoría Diseño. Continúe y habilite el modo de pantalla completa en esa subcategoría.

Creación de la navegación fija al desplazarse

Para agregar el efecto a nuestro sitio web, necesitaremos utilizar algunas líneas de código CSS y algunas líneas de código jQuery. El código CSS que usaremos colocará la navegación en la parte inferior de la pantalla y hará que se comporte como un pie de página normal antes de que se active el código jQuery. Después de eso, las líneas de código jQuery tomarán el relevo del código CSS personalizado y permitirán que la navegación se comporte de acuerdo con su posición en el sitio web.

Agregue el código CSS requerido

Comenzaremos agregando el código CSS requerido a nuestro sitio web. Generalmente, hay tres formas de hacer esto. Las dos primeras formas hacen que el código se aplique a todo el sitio web. El tercer método hace que funcione solo para una página.

Agregar código CSS a través del personalizador de temas

El primer método que le mostraremos le permite agregar el código a través del Personalizador de temas. Esta es una forma de agregar código que no se usa con tanta frecuencia, pero tiene algunas ventajas. Uno de ellos es que tan pronto como haya agregado el código, notará que los cambios ocurren en tiempo real.

Para agregar el código CSS, abra su panel de WordPress> vaya a Apariencia> Personalizar> Desplácese hacia abajo en la pestaña y abra la pestaña CSS adicional> Agregue las siguientes líneas de código CSS:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Agregar código CSS a través de opciones de tema

Otra opción que tiene, que también es la más común, es agregar el código CSS a las Opciones de tema de su sitio web Divi. Una vez que haya agregado el código, se aplicará a todo el sitio web. Si está buscando una posibilidad que agregue el efecto a una sola página, pase a la siguiente posibilidad donde puede agregar el código a una página en particular.

Para agregar el código a sus Opciones de tema; vaya a su panel de WordPress> Divi> Opciones de tema> Desplácese hacia abajo en la pestaña General y pegue el siguiente código en el campo CSS personalizado:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Agregar código CSS a una sola página

Esta posibilidad puede ser interesante si desea aplicar esta navegación fija a una sola página, pero no al resto del sitio web. Si está utilizando el encabezado de ancho completo solo en la página de inicio, por ejemplo, es posible que desee utilizar este método.

Abra la página donde desea agregar la navegación fija al desplazarse. A continuación, verá el siguiente símbolo en la esquina derecha del constructor:

Haga clic en él y verá aparecer una pantalla en la que puede realizar modificaciones en toda la página. Agregue el siguiente código en el cuadro CSS personalizado para que se aplique a esa página en particular:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Agregue el código jQuery requerido

El siguiente paso que queremos dar es agregar el código jQuery a nuestro sitio web de WordPress. Este código comenzará a funcionar desde el momento en que se desplace. Podemos agregar el código jQuery de dos formas; a través de las Opciones de tema o mediante el Módulo de código. Si desea agregar el código a una sola página, puede usar el Módulo de código en combinación con la tercera posibilidad que mencionamos para el código CSS en esta publicación.

Agregar código jQuery a través de las opciones del tema

Para aplicar el código a todas las páginas de su sitio web, puede agregar el código a las Opciones de tema. Vaya a su panel de WordPress> Vaya a Divi> Continúe a Opciones de tema> Abra la pestaña Integración> Y pegue el siguiente código en el campo '<head> de su blog':

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Agregar código jQuery a través del módulo de código

Si desea agregar el código a una página en particular, puede hacerlo a través del Módulo de código. En la parte anterior, donde agregamos el código CSS, debes haber elegido la última opción.

Regrese a esa página y agregue una sección estándar en la parte superior de su página. Dentro de esa sección estándar, agregue un módulo de código. De hecho, puede colocar esta sección donde quiera, pero si desea encontrarla rápidamente, le recomendamos que la coloque en la parte superior de su página. A continuación, copie y pegue el siguiente código en el cuadro de contenido de su módulo de código:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

¡Y eso es! El código ahora debería funcionar, transformar su menú y hacer que su sitio web sea un poco más interactivo.

Pensamientos finales

En esta publicación, le mostramos cómo crear una navegación fija al desplazarse. Le proporcionamos algunas líneas de código CSS y algunas líneas de código jQuery que deberían funcionar. Si ha seguido esta publicación paso a paso, debería poder obtener el resultado final. Si tiene alguna pregunta o sugerencia para próximas publicaciones; ¡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 DenisXize / shutterstock.com