Menú fijo cuando hacemos scroll en Genesis Sample 2.6.0

Estamos de acuerdo en que un menú fijo aporta accesibilidad y navegabilidad a los usuarios. Pero también nos gusta un buen diseño. En este artículo veremos como hacer el menú fijo cuando hacemos scroll en Genesis Sample. Añadiremos un poco de diseño y apariencia a esa funcionalidad casi imprescindible. 

En Genesis Sample el menú viene ahora fijo con una sombra añadida. Eliminaremos esa sombra para que se visualice sólo cuando el menú se adhiera a la parte superior, es decir, al hacer nosotros scroll. 

En las capturas he «pintado» el header de azul claro para que se aprecie la diferencia de tamaño de cuando está recién cargada la web a cuando hacemos scroll. 

Lo más común en estos casos es usar una función javascript para agregar una clase al menú cuando hagamos scroll. La clase nosotros la añadiremos al body, de esa manera con el CSS la usaremos con el objeto que queramos.

Lo primero es crear el archivo javascript que llamaremos scrolled.js. En el incluiremos este código:

Lo agregaremos en la carpeta /js del tema. El siguiente paso es agregar este script a la lista de carga del tema y eso lo haremos en el archivo functions.php del tema. Incluiremos esta línea dentro de la función de carga de scripts. En Genesis sample la función es genesis_sample_enqueue_scripts_styles(). 

Si no os sentís cómodos editando las líneas de esa función, podéis crear vuestra propia función para agregar el script a la cola de carga y ponerlo al final del archivo functions.php.

Hasta ahora sólo hemos añadido el script para que cuando hagamos scroll se agregue una clase al body. Pero es ahora, lo que haremos con esa clase en CSS, lo que dará ese efecto de que el menú decrece y se adhiere a la parte superior de la web.  

Con pocas lineas daremos este sencillo efecto. Buscaremos estas líneas de código. En el archivo original están en la línea 1440.

/* Site Header
	--------------------------------------------- */

	.site-header {
		position: fixed;
		width: 100%;
		z-index: 9999;
	}

Y las dejaremos así:

/* Site Header
 --------------------------------------------- */

 .site-header {
        position: fixed;
        width: 100%;
        z-index: 9999;
        box-shadow: none;
    }

    .site-header {
        background-color: #fff;
        padding: 30px;
        transition: all .5s ease-in-out;
    }

    .scrolled .site-header {
        box-shadow: 0 0 20px rgba(0,0,0,0.05);
        padding: 0 30px;
    }
} 

Otra cosa que tendremos que hacer es comentar la linea 971 del original, donde se le da esa sombra la header, que ahora solo queremos que se muestre cuando se fija el menú. Os dejo la porción de código donde hay que comentar la línea.

/* Site Header
------------------------------------------------------- */

.site-header {
	background-color: #fff;
/*	box-shadow: 0 0 20px rgba(0,0,0,0.05); */
	padding: 0 30px;
}

Laborioso, pero nada complejo, y hemos conseguido un efecto de lo más profesional. Ya cada uno retocará el CSS para hacer su estilo propio. Esto sirve apra sombras mas pronunciadas o el menú de distinto color. Transiciones, etc…

Y como simpre digo, para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.