Cómo crear una cabecera con menú fijo

A todo el mundo le gustan los menús fijos ¿verdad?

Sí, me refiero a esos menús que siguen al usuario a medida que hace scroll por la web, para que tenga siempre a mano los elementos principales de la web, que para eso los ponemos en los menús ¿no?

Pues bien, en este artículo vamos a aprender a crear una cabecera con menú fijo, si es que nuestro tema no tiene esa funcionalidad.

Pero antes…

¿Por qué debería ofrecer un menú fijo?

Cuando los visitantes navegan por tu web seguramente querrás ofrecerles acceso sencillo a tus contenidos principales, y a muchos de estos visitantes les resultará molesto tener que volver a hacer scroll hacia arriba para navegar por tu web.

Los menús fijos ofrecen una solución sencilla a este desagradable problema. Con una barra de navegación fija los visitantes pueden rápidamente encontrar lo fundamental de tu web.

Además, mejoran la experiencia de navegar por la web y animan al visitante a consumir más contenidos, lo que resulta en una reducción de la tasa de rebote.

Por otra parte, hay situaciones en las que no es recomendable, especialmente si tu menú (o cabecera) fijo ocupa demasiado espacio, lo que molestaría a la hora de ver tu contenido.

Menú fijo hecho totalmente a mano

¡No hay dolor! Vamos a ver cómo hacer un menú fijo totalmente a mano, para impresionar a tus amistades, pero sobre todo para aprender los conceptos básicos, algo que nunca está de más.

Crea el HTML

Lo primero que vamos a hacer es añadir el siguiente HTML en la cabecera de nuestra web, normalmente en el archivo

header.php

del tema.

Como verás es muy básico, incluyendo los

div

y clases fundamentales, y solo un par de enlaces, a los que puedes añadir tantos como quieras agregando elementos (

  • otro elemento
  • ).

    Crea el CSS

    Lo siguiente es crear un poco de CSS para hacer un bonito menú fijo. Pega el siguiente código en la hoja de estilos de tu tema, normalmente será en el archivo

    style.css

    .

    #menufijo{
            width: 1122px;
            height:30px;
            margin-left:-48px;
            padding:5px 48px;
            position:fixed;
            top:0;
            background:#7eb7d9;
            display:none;
    }
            
    .menu-fijo{
            width: 260px;
            float: right;
            text-align: right;
            padding:4px 0 5px 0;
            list-style-type:none;
    }
    
    .menu-fijo li{ display:inline; }
    .menu-fijo a{
            ont-size:0.9em;
            color:#fff; 
            text-shadow:1px 1px #5E8BC5;
            padding:0 0 0 10px;
    }

    El riquitaun … estoooo … el jQuery

    Pero ¿cómo detectamos cuando se hace scroll en la página suficientemente como para que no se vea la cabecera?

    Pues usando jQuery, por supuesto.

    Pega el siguiente código en el archivo

    footer.php

    del tema. Eso sí, asegúrate de que tu WordPress incluye jQuery (normalmente lo tiene).

    $(document).ready(function() {
            $(window).scroll(function(){
                    if(document.body.scrollTop > 300)
                            $('#menufijo').fadeIn( "slow", function() { });
                    else    
                            $('#menufijo').fadeOut( "slow", function() { });
            });
    
            $('a#srolltotop').click(function(){
                    $('html, body').animate({scrollTop:0}, 100);
                    return false;
            });
    });

    Lo que hace este código es sencillo.

    En la línea 3 detecta si el documento ha hecho scroll más de 300 píxeles desde arriba, y si así fuera se llama a la función jQery

    fadeIn()

    para que muestre el menú fijo.

    Luego, se usa la función

    fadeOut()

    para ocultar el menú fijo cuando sea visible la parte superior de la página.

    Si te fijas, además, en la línea 9 está añadido un código para detectar cuando esté activo el enlace

    #scrolltop

    , el clic que hará scroll a la parte de arriba de la página.

    Menú fijo solo con tus menús de WordPress y un poco de CSS

    Si lo anterior se te hace bola, aquí tenemos otro método sencillito, para hacer fijo cualquier menú que ya hayas creado en tu WordPress desde el Personalizador. Son solo 2 pasos.

    Identifica la clase CSS de tus menús

    Lo primero es identificar la clase CSS que usa tu tema para la cabecera y los menús de navegación.

    Para ello haz clic derecho en cualquier parte de tu web y haz clic en «Inspeccionar» (Chrome) o «Inspeccionar elemento» (Firefox y Safari). Se abrirá el inspector del navegador.

    Ahora pon el cursor sobre la cabecera y se mostrará el nombre de la clase CSS que usa tu tema para mostrarla.

    Aquí tienes tres ejemplos de nombres que te puedes encontrar, aunque variará en cada tema:



    Depende de dónde sitúes el cursor se seleccionará la clase para la cabecera o solo para los menús, pero mi consejo es que uses la clase para la cabecera, que funcionará siempre bien al hacer scroll.

    Añade ese «poquito» de CSS

    Una vez identificada la clase CSS que usa tu tema para la cabecera (dónde esté el menú que quieres hacer fijo), ve a

    Apariencia > Personalizar > CSS adicional

    de tu WordPress y añade lo siguiente:

    #masthead.site-header { //Aquí sustituye este ID de la clase CSS por el de tu tema. 
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
    }

    Del código anterior, a priori, solo hay que cambiar el ID de la clase CSS que use tu tema. El resto es cuestión de gustos, pero procura cambiar lo mínimo, colores si acaso.

    Publica los cambios y comprueba si tu menú sigue la navegación a medida que haces scroll por la página hacia abajo.

    Dependiendo de la estructura de tu tema puede requerir también cambios en la altura, márgenes o incluso posiciones.

    Menú fijo con plugins

    Pues sí, también hay algunos plugins que te ayudarán a hacer fijo tu menú y/o cabecera. Vamos a ver los que son gratuitos ¿vale?

    Sticky Menu (or anything)

    Este requiere un pelín de esfuerzo por tu parte porque, igual que con el método anterior, debes identificar antes de configurarlo el ID de la clase CSS que use tu tema para la cabecera/menús.

    Una vez lo tengas solo tienes que ponerlo en la página de ajustes del plugin.

    Sticky Menu on Scroll

    Con este otro plugin, aunque también puedes indicar la clase CSS, te permite seleccionar el menú que quieres fijar, lo que no deja de ser una ayuda.

    Simply Sticky Header on Scroll

    Este es diferente, lo que ofrece es que crees un menú nuevo que siga el scroll. Puedes añadir un logo y personalizarlo a tu gusto.

    Se hace todo desde su propio menú en el Personalizador.

    Es un enfoque diferente pero igual te gusta.

    Fixed and Sticky Header

    Muy sencillo y fácil de configurar. Como en el primero, tienes que identificar el ID de la clase CSS, pero funciona de maravilla.

    Temas que ya ofrecen menús fijos

    Para finalizar, hay temas que ya llevan esta funcionalidad incorporada, como por ejemplo Divi, en su página de opciones, y otros muchos.

    ¿Cuándo debería ofrecer una cabecera o menú fijo?

    Hay muchas posibles situaciones, pero las siguientes son unas bastante buenas razones para usar una cabecera o menú fijo en tu web:

    • Tu sitio tiene mucho contenido
    • Tu sitio utiliza scroll infinito o tiene páginas muy largas
    • Quieres que tus usuarios se registren o compren algo (que esté en tu menú)
    • Tu sitio es una aplicación web con botones/enlaces usados con frecuencia
    • Tu sitio tiene páginas importantes que los usuarios visitan con frecuencia (revisa tus datos de Analytics)
    • Quieres mostrar siempre un buscador (que está en la cabecera)
    • Tienes una tienda online, y quieres que el carrito siempre esté visible
    • En tus menús enlazas a tus contenidos esenciales

    Reflexionando

    Ahora te preguntarás…

    «¿Y por qué tú no tienes un menú fijo en Ayuda WordPress si el blog cumple con muchas de las razones para tenerlo?»

    Pues porque este blog siempre he querido que esté totalmente centrado en el contenido, sin forzar la máquina, y cuando sigues al usuario con un menú parece que «le estás diciendo» que haga clic en algo de esa cabecera.

    Y, además, considero que, como lector de Ayuda WordPress, ya sabes que además de contenido gratis a diario también tengo servicios de los que pagan facturas y eso, y que si quieren hacer una consultoría en directo o un curso conmigo ya sabrán encontrar los enlaces.

    Vamos, que cada sitio es un mundo, y tú debes elegir qué experiencia de navegación quieres ofrecer. En mi caso, en este blog, he querido que sea lo más sencilla posible con las mínimas distracciones.

    La entrada Cómo crear una cabecera con menú fijo la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

    Laura D´Cuero
    0 comentarios

    Dejar un comentario

    ¿Quieres unirte a la conversación?
    Siéntete libre de contribuir!

    Deja una respuesta

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