Personalizaciones del Header para Divi

Vamos a ver unas cuantas personalizaciones del header en Divi, esa fantástica plantilla para WordPress.

 

  • Cambiar el color de fondo, de sólido a semi-transparente cuando se hace scrolling

     

/*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 :

header solido divi

 

Y así se verá el header (semi-transparente) cuando hagamos scrolling en la página:

header divi efecto solido a semi-transparente

 

Por supuesto podemos cambiar el color del fondo RGB y la opacidad deseada.

 

 

  • Cambiar el tamaño de fuente del teléfono y el email en la barra superior de la cabecera Divi (Top header)

     

/* 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:

 cambiar tamaño fuente telefono y email en header divi
 

Tamaño más grande del teléfono y el email, tras aplicar el tip CSS:

cambiar tamaño fuente telefono y email en header

 

 

/* header bottom border */
    #main-header {border-bottom: 10px solid #f7ead9;}

 

Efecto de este tip CSS:

Aplicar a la cabecera Divi un borde inferior grueso

 

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.

 

  • Ocultar la cabecera cuando hacemos scroll hacia abajo

/* hide header on scroll */
  .et-fixed-header { display:none; }

Simple. Oculta la cabecera cuando hacemos scroll.

 

  • Ocultar la cabecera totalmente

/* hide header */
  #main-header { display:none; }
  #page-container { padding-top:0px !important } /* moves rest of the page up */

Igual, pero elimina la cabecera totalmente.

 

  • Eliminar la sombra gris bajo la cabecera

/* hide header shadow */
  #main-header{ 
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;}

 

Origen de esta entrada: Divi Snippets and Hacks