El tener un menú fijo mejora enormemente la navegación. El usuario tiene a mano en todo momento todas las secciones de la web. Ya hice no hace mucho un tutorial de como hacer transparente la cabecera, logo y menú, del tema Wellness Pro. Pues bien, este otro tutorial lo complementa, proporcionando un menú fijo o sticky menu, a esa cabecera translúcida. Sólo que mientras que la otra modificación era sólo para la portada, esta es extensible a todo el tema.
Como decía no sólo en la portada cuando hacemos scroll sensiblemente más de 120px, el menú se adhiere a la parte superior de la pantalla y se queda fijo.
Empecemos por lo esencial. Creamos un archivo en la carpeta JS de nuestro tema Wellness Pro llamado custom.js.
En el introducimos este código. Simplemente añade la clase .fixed-menu al .site-container del tema cuando el scroll llega a 120px.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Evidentemente, para que este nuevo archivo se cargue hay que decirle al tema donde está. Eso lo haremos metiendo esta línea de código en nuestro functions.php. Concrétamente dentro de la función wellness_enqueue_scripts_styles().
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
El CSS
Una vez hecho todo lo anterior, lo que queda es añadir los estilos necesarios.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
En caso de que lo combinemos con el tutorial anterior de Wellness Pro en el que haciamos la cabecera transparente, deberemos añadir los estilos necesarios para cambiar colores y conseguir de nuevo la legibilidad.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Y como en el otro tutorial encapsularemos todo en una Media Query para pantallas mayores de 1023px. Todo el código junto quedaría así:
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Evidentemente no tenemos porque repetir la Media Query. Si tenemos implementado el otro tutorial también, podemos tener todo el código CSS dentro de una única Media Query.
Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.