Monthly Archives: January 2014

Sticky nav en wordpress con css

En muchos blogs y páginas web se ha puesto de moda dejar fija la barra de navegación, esto es algo muy sencillo de hacer y que aporta mucho al blog, ya que cuando alguien está navegando, no tendrá necesidad de subir hasta arriba si quiere acceder a alguna de las opciones del menú.

Para hacer tu sticky nav en wordpress estoy segura de que existen mil formas, pero yo voy a enseñaros la más sencilla que se me ha ocurrido, aunque quizás no sea la más correcta.

Digo que es la más sencilla porque vamos a hacerlo mediante css, y no vamos a necesitar tocar absolutamente nada del header, ni de las funciones.

El tema que tengo activado es un tema hijo del Twenty Thirteen, y es sobre el que he hecho las modificaciones, no puedo asegurar que estas modificaciones funcionen sobre cualquier otro tema de wordpress.

Las modificaciones son las siguientes:

Con esto lo que hemos hecho es muy sencillo de entender, con el z-index hemos puesto la barra de navegación en el eje  z por encima del resto de cosas,  que estarán en el eje 0.

Con position:fixed, hemos dejado fija la posición de la barra, por lo que no va a cambiar aunque bajemos y naveguemos por la página.

Y poniendo un margin-top negativo hacemos que la barra de navegación suba y se ponga arriba del todo. Quizás con este número tenéis que jugar un poco, dependiendo de si habéis modificado la barra de navegación, o si habéis añadido algún elemento que no estuviera en el tema por defecto.

Una vez que hemos hecho esto, es posible que si tenemos alguna imagen en la cabecera se nos quede oculta detrás de la barra de navegación. Pero eso lo arreglamos con un par de modificaciones.

Primero ponemos en el header un margin-top:

Y ahora nos quedará de nuevo nuestra barra de navegación descuadrada, así que lo mismo que le hemos quitado de margin-top al header se lo tenemos que poner sumar al margin de la barra de navegación, que finalmente quedará así:

Vuelvo a repetir que los px de los margenes pueden variar un poco, dependiendo de si el tema del que partís no es el mismo o si habéis añadido algo más a la barra de navegación, pero  de todos modos, sólo tendréis que jugar con un par de números hasta dejarlo perfecto.