Cambiar header por defecto de la plantilla

[Elena_Lee]

Buenas tardes,

Tengo una pantilla adquirida en prestashop llamada Parlops. Prestashop 1.7.4. El color principal por defecto del header y de algunas cosas como botones era el marrón, y conseguí cambiarlo al azul que hay actualmente con codigo CSS. Lo estoy haciendo a través de un módulo llamado Custom code module by ST-themes. Pero resulta que al cambiar el color me di cuenta que una barra superior (donde esta el icono de iniciar sesión del cliente o el icono de busqueda), esta en azul, parece ser que es el mismo epacio que el header entero visto desde el móvil y no he sabido cambiarlo. Quiero decir, que lo que en el ordenador se ve como una barra superior azul por encima del logo, en el móvil se ve todo el fondo donde esta el logo en azul. Y no encuentro la manera para hacer que en el móvil se vea esa parte igual que el ordenador.

¿Alguien podría ayudarme?

El enlace es: https://harucosmetics.com/

Adjunto capturas de pantalla también de ambas vistas.

Mil gracias

[Pedro]

Hola,

Pon este css, hace que en los dispositivos menores a 768px de ancho la cabecera sea blanca

 

@media (max-width: 768px) {
	#header .header-nav{
		background: #fff !important;
	}
}

 

[Juan-Shunfa]

Te recomiendo ir mirando un poco de CSS te será de gran ayuda, si haces clic derecho en firefox/chrome (recomiendo firefox) puedes usar la opción "inspeccionar elemento" con esto verás el código html , con sus ids y class y ver que CSS está vinculado a dichos elementos. De esta forma puedes editar el CSS del tema o incluso instalarte un módulo como el que me descargue gratuito que es algo así como "custom css" y te permite insertar en un campo el css adicional que quieras para tu página sin tener que buscar los archivos.

Con este proceso yo por ejemplo veo en tu web que el siguiente CSS afecta al problema que quieres solucionar:

#header .header-nav {
    background: #b7e3ee; <<<<<<<<<<< Este es el color
    max-height: 94px;
    margin-top: 1em;

Además como dice Pedro usando las reglas CSS para hacerlo responsive según los dispositivos también puedes cambiar para dicha resolución el color y ponerlo en blanco.

Saludos

 

[Elena_Lee]

6 hours ago, Juan-Shunfa said:

Te recomiendo ir mirando un poco de CSS te será de gran ayuda, si haces clic derecho en firefox/chrome (recomiendo firefox) puedes usar la opción "inspeccionar elemento" con esto verás el código html , con sus ids y class y ver que CSS está vinculado a dichos elementos. De esta forma puedes editar el CSS del tema o incluso instalarte un módulo como el que me descargue gratuito que es algo así como "custom css" y te permite insertar en un campo el css adicional que quieras para tu página sin tener que buscar los archivos.

Con este proceso yo por ejemplo veo en tu web que el siguiente CSS afecta al problema que quieres solucionar:

#header .header-nav {
    background: #b7e3ee; <<<<<<<<<<< Este es el color
    max-height: 94px;
    margin-top: 1em;

Además como dice Pedro usando las reglas CSS para hacerlo responsive según los dispositivos también puedes cambiar para dicha resolución el color y ponerlo en blanco.

Saludos

 

En eso estoy, sí. Muchisimas gracias!