(SOLUCIONADO) Header en el modo movil

[Toshi_akea]

Buenas a todos otra vez.

Estoy dándole un par de vueltas al diseño del header de mi web, sobretodo de cara a la versión móvil. Presta 1.7.6.4

Os cuento:

http://s823327281.mialojamiento.es/

No estamos usando logo. El logo que hay puesto es uno transparente, para que se vea la imagen que hemos puesto en el background.

El caso es que esta imagen solo se ve en modo PC. En mi movil no se ve la imagen, solo el color de fondo.

Entonces, o una de dos:

1. Encuentro una manera de poder poner un logo SOLO para la versión de movil. Así podría dejar la imagen en versión PC, y el logo en el movil. Actualmente el logo no se ve porque es una imagen transparente.

2. Encuentro la manera de añadir una imagen, o adaptar la misma, para que también se vea en el movil.

Cualquiera de las dos me vendría bien, y ya si me ayudáis con ambas opciones, ya vería yo cual es finalmente la mejor opción para mi web.

Muuuuchas gracias a todos!

Edited April 19, 2020 by Toshi_akea (see edit history)

[luishuaymana]

Ninguna de tus opciones es factible. 

Existe la razón fundamental del logo, la cual es la imagen representativa de toda la web y sirve no solo para el index o inicio, también sirve para los correos electronicos de mensajes de pedidos, de bienvenida, de contrasena, de devoluciones, etc.

La mejor solución sería que subas el logo que ira en el movil y correos electronico, y
despues aplicar CSS para ocultar cuando se vea desde escritorio.

Ejemplo:  (La clase css del logo es "#header .logo") 
Entonces aplicamos ocultar o no mostrar cuando el display de la pantalla sea mayor a 990px

@media (min-width: 990px)
     #header .logo {
        visibility: hidden;
     }

o tambien puedes usar display nnone.
 

[Toshi_akea]

Gracias por la respuesta.

Como hay una zona para poder poner el logo en los Correos, ahí si que lo tenemos puesto. Y hemos mandado correos de prueba, y aparece.

Probaré lo que dices, y te cuento, gracias

[Toshi_akea]

Ole! Lo hemos conseguido!

He puesto el código

@media (min-width:768px){#header .logo{visibility:hidden}}

para que coincida en la medida en el moneto que la imagen del Header desaparece, y ha funcionado! En el momento que el Header desaparece, aparece el logo.

Muchas gracias @luishuaymana ^^

Edited April 19, 2020 by Toshi_akea (see edit history)