«Header» más delgado en tema Boss Pro de Genesis

Los menús pegajosos, o Sticky Menu, por horrible que suene la traducción, junto con los menús fijos (fixed menu), son hoy día muy populares. Facilitan al cliente o lector de nuestra web, una mejor experiencia de navegación (factor importantísimo de la UX), ya que le proporcionan constantemente acceso a casi todas las partes de la web. Son estos detalles los que hacen que aumente el tiempo de permanencia medio de una visita en nuestra web.

Boss Pro

Boss Pro es el tema de Genesis  es uno de los que más uso en mis proyectos de diseño. Una de sus ventajas es ese Sticky Menu o en este caso sticky header o cabecera fija, que bajo mi opinión es demasiado grueso. El espacio en la pantalla en limitado y cada pixel cuenta. Por eso, lo primero que hago cuando trabajo con este tema es quitarle altura al menú. 

Hay uno sólo, pero para la explicación que quiero dar y que todo el mundo lo entienda, digamos que hay dos menús o cabeceras en Boss Pro. Una, la transparente, la que sin tocar el ratón podemos ver claramente en la portada. Como se muestra en la imagen de abajo.

Y otra la que se muestra en cuanto hacemos algo de scroll con el ratón. Por poco que movamos la página, toda la cabecera se vuelve opaca y se adhiere a la pantalla. Es esta cabecera la que es demasiado gruesa para mi gusto. 

Y como he dicho antes, en diseño web cada pixel cuenta. Con unas pequeñas modificaciones en el CSS podemos hacer este menú o mejor dicho la cabecera completa, aún más delgada. 

El código

Las modificaciones las haremos en el archivo style.css de la carpeta de nuestro tema Boss Pro. Las siguientes líneas de código las añadiremos al final de nuestro archivo CSS. 

@media only screen and (min-width: 800px) {
.header-scroll .site-title {
       line-height: 60px;
    }

.header-scroll .nav-primary .genesis-nav-menu > li > a {
        padding: 16px 0 14px;
    }
}

Esto modifica el tamaño de la cabecera en pantallas con un mínimo de 800px de ancho. Esto concuerda con las mayoría de tablets. Es decir, que sólo afectará a PC y portátiles. Si además queremos estrechar la cabecera de las pantallas de móviles y tablets, debemos modificar estas otras lineas de nuestro archivo CSS. 

Estas líneas de código:

.site-header, .header-image .site-header {
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    position: relative;
    background: #fff;
}

Quedarán así:

.site-header, .header-image .site-header {
    width: 100%;
    z-index: 999;
    padding: 6px 0 3px; /* Sólo hemos bajado un poco el margen externo */
    position: relative;
    background: #fff;
}

Esta parte es opcional, ya que en pantallas de 800px para abajo, el menú no es fijo y se desplaza con el resto de la página. Pero yo cuido mucho los detalles en mis diseños y la concordancia es una de las cosas en las que pongo muhca atención. Me parece coherente con el cambio que hemos hecho antes ;).

Añadido

Ya publiqué un artículo sobre como sustituir el título de la web por código HTML. Este tema se presta mucho a ello. Tiene un diseño pensado para un título tipográfico. Desde luego eso me ha dado muy buenos resultados en varios clientes. 

Ya me diréis que os parece la modificación. Se que es sencilla, pero creo que merecía la pena compartirla.