/*Estado original*/
#main-header {background-color: rgba(31,31,31,1);}
/*Estado de Scrolling*/
#main-header.et-fixed-header {background-color: rgba(31,31,31,0.5);}
El efecto de este tip CSS será el siguiente:
Así se verá el header al cargar la página, se verá solido :
Y así se verá el header (semi-transparente) cuando hagamos scrolling en la página:
Por supuesto podemos cambiar el color del fondo RGB y la opacidad deseada.
/* top header */
#et-info-phone { font-size:130% } /* phone number */
#et-info-email { font-size:130% } /* email address */
#et-info { font-size:130% } /* both at once */
El efecto de este tip CSS será el siguiente:
Tamaño por defecto del teléfono y el email antes de aplicar el tip CSS:
Tamaño más grande del teléfono y el email, tras aplicar el tip CSS:
/* header bottom border */
#main-header {border-bottom: 10px solid #f7ead9;}
Efecto de este tip CSS:
Como podemos ver, el borde inferior grueso es de color azul. Podemos elegir el color adecuado en hexadecimal y el tamaño de borde en píxeles, para personalizar nuestro borde inferior grueso.
/* hide header on scroll */
.et-fixed-header { display:none; }
Simple. Oculta la cabecera cuando hacemos scroll.
/* hide header */
#main-header { display:none; }
#page-container { padding-top:0px } /* moves rest of the page up */
Igual, pero elimina la cabecera totalmente.
/* hide header shadow */
#main-header{
-webkit-box-shadow:none;
-moz-box-shadow:none ;
box-shadow:none ;}
Origen de esta entrada: Divi Snippets and Hacks