Cómo hacer fijo el menú o cabecera, en cualquier tema

Una de las características más deseadas por cualquier usuario WordPress para su tema es la posibilidad de hacer fijo el menú de navegación o la cabecera de su tema.

Curiosamente, algunos de los temas WordPress más populares no tienen esa característica o solo la ofrecen en la versión de pago, pero esto tiene fácil solución, o soluciones.

Qué es un menú o cabecera fijo

Es una propiedad por la que cuando un usuario navega por una página el menú de cabecera o la cabecera completa le sigue a medida que navega. Lo habrás visto multitud de ocasiones.

Cómo hacer fijo el menú o cabecera con CSS

La manera más fácil, limpia y rápida de hacer fijo tu menú de navegación o cabecera es añadir un poco de CSS.

Solo tienes que abrir el personalizador de WordPress (Apariencia > Personalizar) y en la sección de CSS adicional añadir un código como el siguiente:

/* Cabecera fija */
#clase-de-tu-cabecera {
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;
}

Ya habrás podido imaginar que la única modificación obligatoria que deberás aplicar al CSS anterior es cambiar #clase-de-tu-cabecera por la clase CSS de la cabecera o menú de navegación de tu tema activo.

El resto de CSS funciona bien con la mayoría de temas pero puedes hacer ajustes a tu gusto, por supuesto.

Cómo hacer fijo el menú o la cabecera con un plugin

De los muchos plugins que ofrecen la posibilidad de hacer fijos menús de navegación o cabeceras el único plugin que consigue casi siempre identificar de manera automática las cabeceras es My Sticky Menu.

Simplemente instálalo y actívalo y comprueba si tu web ya tiene fijo el menú de cabecera.

En caso contrario, o si quieres hacer algún ajuste de diseño, opacidad o de lo que sea, pásate por los ajustes y ahí podrás personalizarlo a tu gusto.

Si, por algún motivo, no identifica automáticamente la clase de cabecera de tu tema, que ya te digo que es bastante capaz normalmente, siempre puedes pasarte por las preguntas frecuentes del plugin, donde tiene una lista de las clases CSS de los temas más populares.

¿Cómo sé cuál es clase CSS de la cabecera de mi tema?

Para aplicar alguno de los trucos anteriores tienes que saber la clase CSS de la cabecera de tu tema, y para ello debes hacer clic derecho sobre una página de tu web y seleccionar la opción de inspeccionar del navegador.

Luego, en el inspector del navegador identificar la clase, es más fácil de lo que parece a priori.

De todos modos, si te atascas prueba con el plugin, ya te digo que es una máquina identificando automáticamente clases CSS de cabecera 😉

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!