Problemas con cabecera y menú en vista para móviles.

Hola Silvia,

Es correcto la imagen cubre mucho del contenido, primero que nadate consulto la barra blanca de abajo la quieres eliminar? por que se muestra y es donde iria el panel del carrito, al tenerlo abajo ya visible suponemos que no debería verse en móvil verdad? si es el caso puedes agregar esto:

@media screen and (min-width: 767px) {
ul#site-header-cart {
display: none !important;
}}

Luego con respecto a la imagen de fondo que se duplica agrega esto:

@media screen and (min-width: 767px) {
.site-header {
background-repeat: no-repeat !important;
background-color: #FCDEE2;
top: 0px !important;
background-position: top center !important;
}}

El menu puedes intentar con esto:

@media screen and (min-width: 767px) {
.menu a {
background-color: white !important;
padding-left: 20px !important;
}}

Verifica y si se nos paso algo nos comentas.

Un saludo 🖐️ 

He probado el segundo y tercer código que me facilitas, pero no he notado ningún cambio a la hora de acceder desde el móvil, sigue repitiéndose la imagen de la cabecera al abrir el menú. 

Hola Silvia,

Perdona, hubo un error en el codigo, trata con este nuevo que te comparto que son los dos ultimos que comentas que utilizastes:

@media (max-width: 768px) {
.site-header {
background-repeat: no-repeat !important;
background-color: #FCDEE2;
background-position: top center !important;
top: 0 !important;
}
}
@media (max-width: 768px) {
.menu a {
background-color: #fff !important;
padding-left: 20px !important;
}
}

Un saludo 🖐️ 

Ahora sí!! Ya se ve la cabecera mejor, y el menú abre sin duplicar. Lo único es un campo blanco que aparece en medio, sabes de qué puede ser? 

Bueno, he hecho modificaciones en la principal para vista pc y me gusta mucho más. He quitado el menú superior y creado esos enlaces en el menú principal, quedando así: 

Sin embargo, cuando nos vamos a la vista desde el móvil, me aparece ese campo del carrito blanco tan largo y antiestético y no deja pinchar sobre ello ni nada. Se puede arreglar eso para que salgo pequeñito o de otra forma? Lo único que se me ocurre es crear otro enlace a la página del carrito y quitarlo con el código que me pasaste, pero me gustaba que saliese el carrito así, con un icono de carro porque queda más estético. 

Hola Silvia.

Veo que el menú si que se despliega:

Se puede arreglar eso para que salgo pequeñito o de otra forma? 

Prueba con esto:

button.menu-toggle {
padding:5px 30px!important;
border-radius:20px!important;
border:0px!important;
}

Un Saludo

Hola Pepe, sí, el menú no tenía ningún problema. He probado el código que me has facilitado para solucionar ese campo blanco tan largo, pero, aparentemente, no hace nada, todo sigue igual en la navegación desde el móvil. 

Hola Silvia, 

Esa parte no debe visualizarse ya que el carrito se muestra en la parte inferior, eso puedes ocultarlo para movil. Puedes probar el siguiente codigo CSS y verificar si con ello funciona y se muestra como necesitas

@media (max-width: 768px) {

ul#site-header-cart {
display: none;
}

}

Verificalo y nos comentas como va todo

Un Saludo

Gracias Karen, ahora está perfecto!! Sois geniales, siempre me ayudáis 🙂 

Hola Silvia, 

Enhorabuena funciona como necesitas, es un placer para nosotros siempre poder ayudarte. 

No dudes en escribirnos si tienes cualquier otra consulta. 

Un Saludo 😊