[Resolved] Cabecera versión móvil

[Jose Luis]

Hola. Estoy usando el “encabezado movil” pero tengo algunos problemas para adaptarlo. La versión PC está perfecta. Pero en la versión móvil la cabecera tiene dos problemas.

1 – El logotipo y el menú desplegable están muy separados en la cabecera del móvil y no encuentro la manera de juntarlos más.

2- Debajo del logotipo me queda un espacio demasiado grande. El doble de espacio que por encima del logotipo. En cambio en la versión PC es el mismo espacio. He probado de añadir este CSS y me arregla el espacio de abajo pero me elimina el espacio que tenía encima del logo: .mobile-header-navigation .site-logo.mobile-header-logo img {
height: 120px !important;
}

Muchas gracias!

[Tom]

Hi there,

1. How would you like it to look, exactly? Would they both be centered?

2. Try this CSS:

@media (max-width: 768px) {
    .separate-containers .site-main {
        margin-top: 0;
    }
}

[Jose Luis]

Hola. La solución del segundo problema me ha ido bien. Gracias.

Sobre el problema número 1: Me gustaría que en la versión móvil el logotipo esté más a la derecha y el menú esté más a la izquierda. No en el centro exactamente pero sí un poco más centrado.

[Tom]

Give this a shot:

#mobile-header {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

[Jose Luis]

Muchas gracias por la ayuda. Así es perfecto.

[Tom]

Glad I could help! 🙂

[Author]

Posts