Barra de Navegación Fija (sticky bar) en el tema OceanWP

Diógenes Mata

Lo he dicho varias veces, el tema OceanWP de WordPress es uno de los mejores que existen en la actualidad: rápido, ligero y altamente personalizable en su versión gratuita ❤

Algunas de las opciones más demandadas por los usuarios están disponibles solo en la versión Premium.

Una de ellas, es la posibilidad de agregar una barra de navegación fija en el header o dicho en inglés: sticky bar. ¡Sí! esa misma que aparece en la parte superior y que te sigue cuando bajas en la página web.

Si no puedes o no quieres adquirir la versión Premium de OceanWP, en esta guía te enseño cómo agregar una sticky bar en el tema OceanWP de manera sencilla, práctica y gratis 😄

Nota
Con este tutorial pretendo darle más posibilidades a los usuarios de WordPress que les gusta echar mano de código. Mi intención no es competir con la versión paga de este maravilloso tema, que además de esta opción, tiene muchos otros agregados que permitirán llevar tu web a otro nivel.

Ventajas de la barra de navegación fija

La sticky bar es un elemento muy usado en el diseño web actual, dentro de las ventajas atribuibles a ella, tenemos:

  1. Mejora la usabilidad de la web al tener los elementos de navegación siempre disponibles para los usuarios.
  2. Si tienes elementos que quieres resaltar en tu sitio, como vínculos, imágenes, campo de búsqueda o cuentas atrás (countdown); la barra de navegación es el mejor sitio para ello. Además, como está siempre visible, mejora enormemente la posibilidad de que la gente haga clic en ellos.

A muchos diseñadores web no les gusta, ya que tiende a distraer la atención del contenido y también disminuye el espacio disponible dentro del navegador web.

Estas dos objeciones son fácilmente solventables: usando una barra de navegación fija con el menor tamaño posible y sin recargarla con elementos que no deseemos llamen la atención del usuario.

Agregando una barra de navegación fija en OceanWP

Tener tu sticky bar es bastante sencillo 😋. Dirígete como administrador de WordPress a: Apariencia > Personalizar, luego haz clic a la opción Custom CSS/JS, ubicado en el menú a la izquierda.

Agrega esto en el espacio en blanco que pone Código CSS

Ahora agrega también este código en Custom JS

Hazle clic a botón Publicar, ubicado en la parte superior.

agregando código css y js para sticky bar en oceanwp

¡Listo!, ya tenemos nuestra Sticky bar. ¿Facil verdad? 👍

Personalizando el código

Con el código anterior, obtendrás de manera rapida tu barra de navegación fija. Pero si quieres adaptarla a tus necesidades, te muestro como hacerlo.

Es importante que solo cambies los valores deseados para que pueda funcionar adecuadamente. Cuida de mantener los espacios, tal como se muestran.

Pantallas donde se muestra la barra fija

Esta sticky bar se aplica solo en pantallas para computadoras de escritorio, o dicho de otra manera, para aquellas que tengan un ancho igual o mayor a 960 px. La mayoría de los monitores actuales cumplen con estas especificaciones.

Para las pantallas más pequeñas, como los de dispositivos móviles: celulares o tabletas, se usará el menú hamburguesa que viene por defecto en el tema OceanWP de WordPress.

menú hamburguesa en oceanwp

Si quieres que se vea en pantallas más pequeñas, cambia el valor 960 en la línea 1 del código CSS: @media only screen and (min-width: 960px) {

Por ejemplo: un valor de 720, hará que se muestre en pantallas con resolución 1280 x 720, entre otras.

Alto de la sticky bar

Para tener una barra de navegación fija con un alto diferente , cambia el valor 76 en la línea 11 del Código CSS: height: 76px;

Dato
Si tu logotipo tiene las medidas recomendadas por el tema OceanWP que es de 164 pixeles de ancho por 64 pixeles de alto, un valor de 76 es ideal.

Si tú logo excede este número (por encima de los 76 pixeles de alto), te recomiendo cambiarlo por un valor que tenga 20 pixeles adicionales, para que quede holgado dentro de la barra. Por ejemplo: si tú logo tiene 100 pixeles de alto, el valor a sustituir sería 120.

Deberás colocar este mismo valor en la línea 14: margin-top:76px;, sustituyendo 76 por 120.

Asimismo,  puedes sustituir el número 62 de height en la línea  17: height: 62px;. Esta determina el alto de la sticky bar cuando te mueves hacia abajo por la página web (efecto que reduce el tamaño de la barra). Cámbialo por un valor que sea al menos 10 pixeles más que el tamaño del logotipo.

Por ejemplo: si tú logo tiene 100 pixeles de alto, el valor debe ser de 110.

Otro valor a sustituir es el 62 en la línea 21: line-height: 62px;. Debe ser igual al valor de la línea 17. Siguiendo el ejemplo anterior: reemplaza 62 por 110.

Efecto de reducción al mover el scroll

Al movernos por la pantalla hacia abajo, se reducirá el tamaño de la barra de navegación fija para que haga uso del menor espacio posible en pantalla.

En el código que te facilito, al bajar 100 pixeles  con el scroll se mostrará el efecto de reducción.

Si quieres cambiarlo, sustituye 100 por el valor que quieras, en el campo Custom JS, línea 3: if ($(window).scrollTop() > 100) {

Con esto ya tendrás tu sticky bar en OceanWP, personalizada a tu gusto 👊

Espero te guste esta guía. Si tienes tus dudas, déjalas en los comentarios, que gustosamente las atenderé. Saludos.

Barra de Navegación Fija (sticky bar) en el tema OceanWP
5 (100%) 10 voto[s]

10 comentarios en “Barra de Navegación Fija (sticky bar) en el tema OceanWP”

  1. Muchas gracias. No se código y me funcionó perfectamente en mi sitio. Al usar plugins, los sliders y otros elementos se superponían al menú al hacer scroll, pero con este código lo solucioné. El único detalle por si a alguien le sirve era que al pegar el código «custom js» me salía error así que termine pegando solo el css.

    • Hola Micaela.
      He probado hace muy poco este truco con la ultima versión del Oceanwp a la fecha (1.6.7) incluido el codigo JS y ha funcionada a la perfección.
      De todas maneras me alegra te haya servido al menos una parte 😀
      Saludos.

  2. Que mas brother!!! gracias por el código funciona bien, pero tengo un problema al usarlo en una tienda online y es el siguiente, pasa que cuando ingreso a la Vista Previa de un producto la barra sigue por encima, he intentado con el z-index de woocommerce pero cuando se sobrepone queda en modo oscuro y no deja usar las opciones del producto solo se sale a la pagina principal al hacer clic, estoy trabajando en modo localhost(siento no poder mostrar la web)
    Saludos

  3. Hola,
    El código no funciona. quizás la actualización a la OceanWP v1.6.7 haya condicionado algo.

    En mi caso el efecto que hace es mover el logo de sitio (lo sube) y un movimiento suave de la imagen de cabecera.

    Pero el resultado final es que no deja el menu fijado.

  4. Hola Diógenes¡¡¡
    Muy bueno el post y muy bueno el blog, que he descubierto hace un rato y llevo dos horas abducido.. (por supuesto me he suscrito).
    Muchas gracias por el contenido tan valioso que compartes y Feliz Navidad¡¡¡.. los días que quedan, claro.
    Saludos desde España¡¡

Deja un comentario

El responsable de este sitio web es Diógenes Mata. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.