Cerrar video

Cómo crear un menú fijo que se haga más pequeño al desplazarse con divi theme builder

por | Ago 11, 2020 | Tutorial gratuito | 6 Comentarios

Hola en este tutorial aprenderás a diseñar un menú fijo que se hará más pequeño al desplazarnos sobre la página, es decir, los elementos de nuestro header o encabezado se encogerán una vez hagamos scroll hacía abajo.

Este es un efecto que por defecto lo podemos hacer con el personalizador de temas de divi, pero en esta ocasión lo haremos con el divi theme builder o el generador de temas de divi ya que de esta manera tenemos más libertad a la hora de diseñar nuestros encabezados personalizados.

La verdad me esperé mucho para realizar este tutorial ya que Nick Roach (fundador de divi) hace semanas comentó que una de las próximas actualizaciones de divi serían los “Divi Sticky” y con esta nueva actualización vamos a poder realizar este tipo de efectos de forma más práctica con divi. Ésta es la principal razón por la que no me animaba a grabar este tutorial a pesar de que muchos de ustedes me lo habían estado pidiendo.

Pero ya esperé tanto que llegué a desesperarme y mejor decidí grabar este tutorial de una vez sin importar que en un futuro podamos realizar este efecto con el divi builder por defecto. De todas formas en este tutorial vamos a realizar otros truquitos sobre la marcha que seguro te servirán en tus proyectos, así que no hay nada de desperdicio. ¡Qué disfrutes este video!

A continuación te dejo los fragmentos de código que vamos a utilizar en este tutorial para que solo copies y pegues.

 

Fragmento para centrar verticalmente los elementos dentro de la fila:

display: flex;
align-items: center;
justify-content: center;

Fragmento jQuery para no superponer el menú fijo sobre la sección:

// No superponer el menu fijo
jQuery(function($){
   
var headerSection = $('.seccion-menu');   
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
    
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);  
   
$(window).resize(function() {
  headerHeight = headerSection.outerHeight();
  headerWrap.css('height', headerHeight);
});  
   
});

Fragmento jQuery para reducir los elementos de la sección menú al hacer scroll:

// Reducir elementos de la sección menú al hacer scroll 
jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  	var scroll = jQuery(window).scrollTop();
	  if (scroll >= 80) {
	    $(".seccion-menu").addClass("seccion-menu-scroll");
	  }
    
	  else{
		$(".seccion-menu").removeClass("seccion-menu-scroll");
	  }
  });
});

Estilos CSS para la sección menú:

/* Estilos menu ov divi */
.seccion-menu, .seccion-menu .et_pb_image img, 
.seccion-menu .et_pb_menu ul li a, 
.seccion-menu .et_pb_button  {
  transition: all .3s ease;
}
.seccion-menu.seccion-menu-scroll {
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3)!important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: all .3s ease;
}

@media only screen and (min-width: 768px) {
  .seccion-menu.seccion-menu-scroll .et_pb_image img {
    height: 40px !important;
    transition: all .3s ease;
	}
.seccion-menu.seccion-menu-scroll .et_pb_menu ul li a {
    font-size: 16px !important;
    transition: all .3s ease;
	}

body #page-container .seccion-menu.seccion-menu-scroll .et_pb_button {
    background-color: #ff8e60 !important;
    color: #ffffff !important;
  	padding-top: 10px!important;
    padding-bottom: 10px!important;
	}
}

/* Estilos botón llamada a la acción menú hamburguesa */
body #page-container .btn-principal {
  margin: 14px 10px 10px 10px;
}

body #page-container .btn-principal a {
  color: #ffffff !important;
  border-color: #ff8e60 !important;
 	background: #ff8e60 !important;
  border-radius: 100px;
  letter-spacing: 1px;
  text-transform: uppercase!important;
  padding: 12px 25px 10px 25px;
}

Estilos CSS para algunos ajustes en el menú móvil:

/* Ajustes responsive menú móvil */
@media only screen and (min-width: 981px) { 
  .btn-principal {
    display: none !important;
  }
}

@media only screen and (max-width: 980px) { 
  .seccion-menu .et_pb_menu__wrap {
    justify-content: flex-end;
  }
}

.et_mobile_menu {
  margin-top: 10px;
  width: 200%;
  margin-left: -100%;
}

/* Cambiar icono hamburguesa a "X" cuando esta abierto */
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

6 Comentarios

  1. Jorge

    Excelente, me sirvió mucho para un proyecto que estoy realizando. Llevaba días probando formas, incluso perdí dinero con un plugin que no sirvió para nada de lo que ofrecía (lamento mucho eso…) y justo cuando estaba por tirar la toalla aparece tu video en youtube, en serio muchas gracias Oscar! 👏👏👏👏👏

    Responder
    • Oscar Viedma

      Jorge acabo de leer tu comentario en youtube y me parece excelente que este tutorial te haya solucionado los problemas que tenías con el menú en móvil. De eso se trata amigo, me alegra leer comentarios como el tuyo. ¡Nunca tires la toalla! 💪 Te mando un abrazo Jorge.

      Responder
  2. claudio

    hola oscar, muchas gracias por el tutorial, solo una consulta como lo hago para que el sub menú quede con un signo + y no abierto completo, saludos… gracias

    Responder
  3. W MH

    Hola Oscar, el layout de este tutorial se puede cnseguir si me suscribo a los tutoriales premium?

    Muchas gracias, me encantan tus proyectos

    Responder
    • Oscar Viedma

      Hola qué tal, la realidad es que para los tutoriales gratuitos no guardo los json. Pero deja ver si lo tengo por allí y te comento.

      Responder

Trackbacks/Pingbacks

  1. Cómo darle estilos o personalizar el sub menú desplegable del módulo menu divi - OV DIVI - […] realizar este ejercicio vamos a usar el menú que creamos en el tutorial anterior, si no lo haz visto…

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest