Incluir un menú flotante en el header de WordPress

Navegando por la red he encontrado un tutorial interesante sobre como tener un menú flotante o pegajoso en la cabecera de nuestro WordPress. Gracias a lifeinthegrid por este interesante artículo. Vemos a continuación como podemos hacer un menú flotante con CSS:

El contenido es el rey cuando se trata de conseguir tráfico a nuestro sitio web, sin embargo si nuestro sitio no se muestra bien, podemos estar perdiendo algo de su audiencia o incluso perspectivas de negocio para el futuro. Cuando visito una página web y veo un elemento que queda fijado (flotante) en la pantalla cuando se hace scroll, por lo general se destaca y mi primera impresión es mirar ese recurso incluso antes de leer el contenido. ¿Vas a hacer algo para destacar el menú de tu web en WordPress?

En esta entrada vamos a ver cómo podemos incluir un encabezado flotante con css a nuestro sitio y ganar una distinción visual. Con menos del 10% de todos los sitios de Internet que utilizan correctamente los activos fijos, se puede establecer una separación y permitir que tus sitios tengan un flujo más elegante y diferente.

Video tutorial

Paso 1: Busca los elementos para fijar como flotante

Lo primero que debemos hacer es localizar el elemento de destino que deseamos establecer como fijado. Esto es muy fácil con un inspector DOM como Google Chrome o Firebug. Para ver cómo se hace esto visita este tutorial de Firebug. Una vez que se ha localizado los elementos se coloca dentro de un elemento div con un id, como el siguiente ejemplo:

<div id="primary_menu">...</div>

Paso 2: Establecer los estilos CSS

Una vez que tenemos los elementos establecidos como fijos/flotantes tendremos muy probablemente que hacer algunos ajustes manuales en el contenido dentro del elemento div fijo. Recuerda que los elementos fijos de trabajo en un diseño hay que modificar las medidas de superior, inferior izquierda y derecha  para conseguir los elementos posicionados correctamente. Si el menú de tu cabecera es grande puedes agregar una capa de opacidad (transparencia) que permitirá que el contenido sea visible por la parte posterior. Esto se puede hacer mediante el uso de la configuración en el archivo CSS opacity.

div#header-fixed {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;}
div#primary_menu {background:#000; height:75px; opacity:0.8}

Paso 3: Validar otros recursos

Una vez que el encabezado del header tiene una posición fija correctamente, querrás asegurarte de que otros recursos multimedia como videos y otros elementos se visualicen correctamente cuando hacemos scroll por la pantalla. Con el fin de que los vídeos de YouTube se vean sin problemas se puede incluir el siguiente script:

$("iframe").each(function(){
    var ifr_source = $(this).attr('src');
    var wmode = "wmode=transparent";
    if(ifr_source.indexOf('?') != -1) {
        var getQString = ifr_source.split('?');
        var oldString = getQString[1];
        var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
    }
    else $(this).attr('src',ifr_source+'?'+wmode);
});

También es importante trabajar con otros activos fijos para asegurarnos de que no choquen con la nueva cabecera fija. Cada sitio va a ser diferente, así que tendrás que evaluar cualquier otro recurso que puedas tener. A continuación se muestra una secuencia de comandos para ajustar el plugin de Wordpress llamado Sharebar. Este script mantiene nuestro menú cuando choca con Sharebar cuando el usuario se desplaza. También cuenta con un estilo adicional que ofrece a la barra una sensación de 3D.

var $sharebar            = jQuery('#sharebar');
var $sharebar_elms     = jQuery('#sharebar li iframe');
var $sharebar_facebook = $sharebar_elms.get(0);
jQuery($sharebar_facebook).css({"width":"60px", "height":"62px", "margin-left" : "7px" });
jQuery($sharebar).css({"margin-top" : "110px", "border-radius" : "5px", "box-shadow" : "0 8px 6px -6px #555, inset 0 0 10px #D3D3D3", "border" : "1px solid #D3D3D3"} );

Plugin menú flotante para WordPress

Si por el contrario no tenemos los conocimientos necesarios y nos dá pánico tocar el código de WordPress, se puede utilizar una alternativa en forma de plugin llamado Sticky Header by ThematoSoup.

Configuración

Header Sticky por ThematoSoup tiene pocas opciones de configuración, que se pueden encontrar en las opciones de personalización de nuestro theme. Esto hace que sea increíblemente fácil de configurar y utilizar.

Menú – Necesita crear al menos un menú de navegación antes de poder añadir a Header Sticky . El menú flotante de la cabecera muestra sólo los elementos de primer nivel, por lo que no se ven los elementos del submenú.

Logo – Puedes cargar tu logotipo flotante haciendo clic en «Subir nuevo»> «Seleccionar un archivo». Lo ideal sería que este logotipo tenga 30px de alto o se cambie de tamaño. Si una imagen de logotipo no carga, se utilizará el título del sitio.

Color de fondo – Puedes elegir tu color de fondo para el encabezado personalizado flotante.

Color de texto – Permite elegir el color del texto para que proporcione suficiente contraste con respecto al color de fondo.

Header Sticky max width – Esta opción te permite adaptar el ancho interior a tu ancho del área de contenido.

Hacer visible el desplazamiento hasta un punto – Esta es la distancia desde la parte superior de la página a la que el encabezado flotante se mostrará, en píxeles.

Ocultar si la pantalla es más estrecha – Header Sticky no será mostrado en las pantallas más estrechas para un valor determinado en píxeles. Cuando la gente utiliza los dispositivos móviles, que están acostumbrados a desplazamiento verticales no es necesario tener encabezados pegajosos.

Así que con unos simples ajustes se puede crear un diseño fijo o flotante que navega más fácil y deja una impresión única para las personas que visitan tu sitio web. Espero que hayan disfrutado este artículo sobre la configuración de un menú flotante.