Barra de MENU Fija (sticky bar) en el tema OceanWP

Información tomada de: https://www.vivablogger.com

Agregar una barra de navegación fija en el header o dicho en inglés: sticky bar.

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 !important;
}
}


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');
        }
    });
});

Personalizando el código

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.

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 👊