[Resuelto] Cambiar la barra de menu cuando se scrolea para abajo.  

Hola Toman,

En este caso es un poco mas delicado ya que divi por defecto no tiene esta opción, sin embargo puedes crearlo con css pero ten en cuenta que los colores que elijas deben visualizarse de forma adecuada en ambos colores por que no es algo que puedas modificar directamente por código.

Para agregar esta funcion por medio de css prueba agregar el siguiente código:

header#main-header {
background-color: #1aa5ff;
}
.et-fixed-header {
background-color: #1aa5ff !important;
}

Esto puedes agregarlo en Apariencias > Personalizar > css adicional. El primer código se refiere al color de fondo estando en la parte superior, y el segundo al hacer scroll.

Verifica con esto y nos comentas que tal te va, un saludo 🖐️ 

@argenis Funciona perfecto! Sera posible cambiar también el color de las letras del menú para que sean blancas cuando el fondo es azul con código css?

Hola Tomas,

No veo aplicado los cambios sin embargo te comparto ambos códigos para ambas versiones del header:

header#main-header ul#top-menu li a {
color: aqua !important;
}
.et-fixed-header ul#top-menu li a {
color: aqua !important;
}

Siendo el primero el código para los enlaces sin hacer scroll y el segundo para cuando haces scroll, nos comentas que tal vas con ellos.

Un saludo 🖐️ 

@argenis Funciona bien la primera parte, pero al hacer scroll, el color no cambia a negro. Te comparto todo el codigo que tengo en mi CSS adicional por si algo esta haciendo conflicto.

div#footer-bottom {
display: none;
}

#top-menu-nav>ul>li>a:hover {
border-bottom:2px solid #a09f9f;
padding-bottom:32px !important;
}

ul#top-menu li a {
color: black !important;
font-family: poppins !important;
font-size: 19px !important;
font-weight: 500 !important;
}

/*** Eliminar la línea separadora del sidebar ***/
#main-content .container:before {background: none;}

/*** Ocultar el sidebar ***/
#sidebar {display:none;}

/*** Expandir el contenido para coger el area del sidebar ***/
@media (min-width: 981px){
#left-area {
width: 100%;
padding: 23px 0px !important;
float: none !important;
}
}

header#main-header {
background-color: #1aa5ff;
}
.et-fixed-header {
background-color: #ffffff !important;
}

header#main-header ul#top-menu li a {
color: white !important;
}
.et-fixed-header ul#top-menu li a {
color: black !important;
}

.single .entry-content{
max-width: 800px;
margin: auto;
}

Hola Tomas,

El problema esta en que no se puede aplicar ambos al mismo tiempo, vamos a hacer lo siguiente:

Ingresa a Apariencias > Personalizar > Cabecera y navegación > barra de menú principal > Bajas hasta donde indica color del texto y seleccionas blanco

Luego de tener esto, sustituye el código que me compartes por el siguiente:

div#footer-bottom {
display: none;
}

#top-menu-nav>ul>li>a:hover {
border-bottom:2px solid #a09f9f;
padding-bottom:32px !important;
}

ul#top-menu li a {
font-family: poppins !important;
font-size: 19px !important;
font-weight: 500 !important;
}

/*** Eliminar la línea separadora del sidebar ***/
#main-content .container:before {background: none;}

/*** Ocultar el sidebar ***/
#sidebar {display:none;}

/*** Expandir el contenido para coger el area del sidebar ***/
@media (min-width: 981px){
#left-area {
width: 100%;
padding: 23px 0px !important;
float: none !important;
}
}

header#main-header {
background-color: #1aa5ff;
}
.et-fixed-header {
background-color: #ffffff !important;
}

.et-fixed-header ul#top-menu li a {
color: black !important;
}

.single .entry-content{
max-width: 800px;
margin: auto;
}

Con esto debe de funcionar, tenias aplicado negro en una capa superior, de esta forma estas seleccionando el blanco como principal y luego al hacer scroll le indicas que cambie por medio de código.

Verifica y nos comentas, un saludo 🖐️ 

@argenis Quedo perfecto! Solo 2 detallitos, se puede que el color de fondo sea un degrade entre dos colores en vez de que sea solo 1 color? Y quería saber si también se puede cambiar la imagen que esta en el logo. Para que cuando el fondo esta celeste, el logo este blanco y cuando el fondo se hace blanco, que el logo sea celeste.

Muchas gracias

Hola Tomas,

En este caso puedes probar con el siguiente código para añadir la opción de degrade en el background en tu sitio web

header#main-header {
background: linear-gradient(90deg, rgba(115,199,253,1) 0%, rgba(1,124,204,1) 0%, rgba(115,199,253,1) 100%);
}

Sobre las opciones de modificar el logo te recomiendo veas el siguiente tutorial donde indican como realizarlo -> Contenido solo visible a usuarios registrados

Un Saludo

@karen Funciona perfecto! Muchas gracias por todo.

Hola Tomas,

Gracias a ti, siempre es un placer poder ayudarte 😀 

Escríbenos si tienes cualquier otra consulta

Un Saludo 😊