WordPress: OceanWP Cabecera fija (Sticky Header)

Cabecera fija desabilitando barra superior

Abre el personalizador de WordPress, ir a  «Apariencia > Personalizar».

Una vez ahí ve a la sección llamada «CSS adicional» y añade el siguiente código:

@media only screen and (min-width: 960px) {
   #top-bar-wrap{display:none}
   #site-header{position:fixed;width:100%;z-index:100;}
}	

con ese codigo ya devemos tener la cabecera fija. 

Cabecera fija 

@media only screen and (min-width: 960px) {
  #top-bar-wrap{position:fixed;width:100%;z-index:100;}
  #site-header{position:fixed;width:100%;z-index:100;margin-top:45px;}
}

Cabecera fija avanzado

Abre el personalizador de WordPress, ir a  «Apariencia > Personalizar».

Una vez ahí ve a la sección llamada «CSS adicional» y añade el siguiente código:

@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;
	/*determina el alto del  sticky bar antes que nos movamos hacia abajo.*/
   height: 76px;
}
.page-header {
   margin-top:76px;
}
	
/*ALTO sticky bar cuando nos movemos hacia abajo por la página web (efecto que reduce el tamaño de la barra).*/
	header#site-header.sticky {
   height: 70px;
}
/*ALTO del contendor del menu podemos poner el mismo ALTO sticky bar */	
header#site-header.sticky #site-navigation-wrap .dropdown-menu>li>a {
   line-height: 70px;
	/*podemos cambiar de color al contendor del menu*/
	/*background-color:#000000;*/
	 
}
.admin-bar header#site-header {
   top: 32px;
}
#site-logo #site-logo-inner {
   height:0 !important;
}
}

Codigo Jss

jQuery(document).ready(function($) {
    $(window).scroll(function () {
  /* al bajar 90 pixeles  con el scroll se mostrará el efecto de reducción.*/
  if ($(window).scrollTop() > 90) { 
            $('header#site-header').addClass('sticky');
	    $('header#site-header').css('background-color','#ff00003f')
	   $('#site-logo-inner img').css('height','70px')
        }
        else{
            $('header#site-header').removeClass('sticky');
	    $('header#site-header').css('background-color','#FFFFFF')
	    $('#site-logo-inner img').css('height','auto')	
        }
    });
});