Fija el menú en la parte superior cuando naveguen por tu web

Genesis

Si quieres conseguir que el menú se fije en la parte superior cuando tus usuarios hagan scroll hacia abajo en tu página, sigue los siguientes pasos:

Menu Genesis

Añade esta función al functions.php de tu tema hijo (este código funciona prácticamente en todos los temas hijos de Génesis.)

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );
function custom_load_scripts() {

	wp_enqueue_script( 'shrinking-header', get_bloginfo( 'stylesheet_directory' ) . '/js/shrinking-header.js', array( 'jquery' ), '1.0.0', true );

}

Crea un archivo llamado shrinking-header.js dentro de la carpeta js de tu theme y pega este código.

jQuery(function( $ ){

	$(".site-header").after('<div class="bumper"></div>');

	$(window).scroll(function () {
		if ($(document).scrollTop() > 10
	 ) {
			$('.site-header').addClass('shrink');
		} else {
			$('.site-header').removeClass('shrink');
		}
	});

});

y después añade estos estilos a tu hoja css cambiando los colores, tamaños y paddings a tu gusto.

/* Shrink
--------------------------------------------- */

.shrink {top:0 !important;
transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

header.shrink {
  position:fixed;
  clear:both!important;
  width:100%;
  height:60px!important;
  max-height:60px!important;
  min-height:60px!important;
  z-index:999999999;
  border-top:3px solid #d65634;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

header.shrink .current-menu-item > a {border-top:none;}
header.shrink .fa-podcast, header.shrink .fa-wrench,header.shrink .fa-book,header.shrink .fa-shopping-cart,header.shrink .fa-question-circle {display:none;}

header.shrink .Roboto {display:none !important}

header.shrink .title-area img {max-width:100px!important;margin-top:-5px;}

Ya tienes el menú fijado. Pero si en tu plantilla no funciona exactamente como tú quieres, puedes ponerte en contacto conmigo y te ayudo.

¿Te ha sido útil este código?
Ayúdanos a saber si este código o función te ha funcionado y así poder ayudar a otros usuarios
SÍ. 🙂
NO. 🙁
Tags
Mostrar Más

Deja un comentario

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