Avisos
Vaciar todo

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

 
Tomas
 Tomas
Usuario experto

Hola, quería saber si era posible, cambiar algunas características del menú al hacer scroll para abajo. Como en este ejemplo donde cuando estas arriba de todo, el menu se ve así:

Menu antes

y al scrolear para abajo, el degrade de fondo se vuelve blanco, las letras se vuelven gris y el logo cambia por uno exactamente igual pero con las letras celestes.

menu despues

Sera posible?

Muchas gracias

Contenido solo visible a usuarios registrados

Respondido : 07/05/2021 3:12 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

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 🖐️ 

Respondido : 07/05/2021 3:39 am

Tomas
 Tomas
Usuario experto

@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?

Respondido : 07/05/2021 4:02 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

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 🖐️ 

Respondido : 07/05/2021 4:19 am

Tomas
 Tomas
Usuario experto

@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;
}

Respondido : 07/05/2021 4:28 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

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

image

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 🖐️ 

Respondido : 07/05/2021 4:51 am

Tomas
 Tomas
Usuario experto

@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

Respondido : 07/05/2021 5:59 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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

 

Respondido : 07/05/2021 12:46 pm

Tomas
 Tomas
Usuario experto

@karen Funciona perfecto! Muchas gracias por todo.

Respondido : 07/05/2021 5:29 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Tomas,

Gracias a ti, siempre es un placer poder ayudarte 😀 

Escríbenos si tienes cualquier otra consulta

Un Saludo 😊 

Respondido : 07/05/2021 5:32 pm