Menú pegajoso en WordPress sin plugin . Cómo hacer un menú pegajoso en WordPress sin plugins, también es conocido como (Sticky menu) solo con CSS 3.
Qué es un menú pegajoso
Un menú pegajoso es aquel que cuando haces scroll vertical en una web se queda fijo en la parte superior y te permite mantenerlo siempre visible sin que desaparezca de la pantalla, como si estuviera pegado.
Este tipo de menú pegajoso en WordPress, se puede hacer de 3 maneras.
- Con solo Css se puede hacer, es muy sencillo de programar ya que tiene la manera de diferenciar las pantallas de los usuarios, para poder colocar que solo se pueda ver en una pantalla o en las dos.
- Con JavasCript (puro, jquery) también se puede realizar, ya es un lenguaje de programación y se requiere de mas conocimiento técnicos. pero esta opción es muy buena, ya que podemos hacer que cuando el usuario haga scroll, el menú cambie de ancho o largo (no recomendado) y también cambie de color.
- Por última opción tenemos diversos plugins para poder instalar en WordPress (detallados en el punto 3), con versiones tanto gratuitas como también de pagos.
Para qué sirve este tipo de menú
La utilidad principal es permitir al usuario navegar entre los contenidos sin tener que subir cada vez al principio de la pantalla.
Esto es muy práctico sea cual sea la web ya que ofreces un mapa del sitio siempre visible para poder navegar.
Mejores plugins para crear un menú pegajoso
Entre los mejores plugins de WordPress para crear menús pegajosos en WordPress voy a destacar 3:
My Sticky Menu
Este plugin es el más completo de los 3 ya que dispone de más opciones de personalización, entre ellas por ejemplo establecer el momento al desplazarnos hacia abajo en pixeles en que se convierte en menú pegajoso. Además convierte el menú en la versión móvil en un botón fijo que al pulsarlo despliega el menú.
WP Sticky Anything
Como su nombre indica con este plugin puedes dejar fijo en pantalla no sólo el menú sino cualquier elemento de la web que quieras. Puedes dejar fija por ejemplo la barra lateral de manera que si tienes elementos de publicidad o las categorías del blog, siempre estarán visibles mientras van leyendo los artículos.
Fixed and sticky header
Si no quieres complicarte con personalizaciones ni nada extra, con este plugin sólo tendrás 4 opciones de configuración, similares a las de los otros plugins, y el resto ya lo hace el solo.
Esto es muy práctico sea cual sea la web ya que ofreces un mapa del sitio siempre visible para poder navegar.
Cómo crear un menú pegajoso en WordPress con CSS
@media only screen and (min-width: 600px) {
.ast-main-header-wrap
{
position: fixed;
width: 100%;
opacity:1;
background-color: #FFF;
border-bottom:0.5px solid #DFCCFB!important;
}@media only screen and (min-width: 600px) es para que solo esté en PC y no en teléfonos móviles o celulares.
Video tutorial
En este video muestro la forma de insertar el código css en la plantilla de WordPress, Dirígete como administrador de WordPress a: Apariencia > Personalizar, luego haz clic a la opción Css adicional. una vez allí ya puedes colocar el código Css que te he dejado en el punto 4, luego le das al botón «Actualizar» y listo…
Conclusiones
Mantener al usuario con la información siempre accesible es muy importante para que no se canse de ir arriba y abajo por tu web y decida buscar en otro sitio lo que necesita.
Los menús pegajosos son esenciales para esto y si tu tema de WordPress no dispone de esta opción es muy sencillo conseguirlo con los pasos que te he indicado.
