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

como agregar una sticky bar gratis en oceanwp de wordpress

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%) 5 votos

Diógenes Mata

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

TAMBIÉN TE PODRÍA INTERESAR

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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.