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

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 😄

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

@media only screen and (min-width: 960px) {
header#site-header {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   width: 100%;
   z-index: 9999;
   -webkit-transition: all .5s;
   transition: all .5s;
   height: 76px;
}
.page-header {
   margin-top:76px;
}
header#site-header.sticky {
   height: 62px;
}
header#site-header.sticky #site-navigation-wrap .dropdown-menu>li>a {
   line-height: 62px;
}
.admin-bar header#site-header {
   top: 32px;
}
#site-logo #site-logo-inner {
   height:0 ;
}
}

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

jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('header#site-header').addClass('sticky');
        }
        else{
            $('header#site-header').removeClass('sticky');
        }
    });
});

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

¡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.

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;

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.