[SOLUCIONADO] Menú responsive centrado

naiarafernandezruiz · #1 (**permalink**) 09/04/2015, 02:03

Buenas a todos,

Os escribo porque llevo tiempo intentando centrar el icono y el menú responsive de mi web, pero no lo consigo. Cuando minimizo la pantalla el icono se coloca a la derecha y el menú no sé ve entero.

Supongo que será un tema de estilos, pero no consigo dar con el error. He utilizado media queries y en el @media only screen and (max-width: 768px) he incluido el siguiente estilo:

.responsive-menu {
display: none;
}

#responsive-menu-icon {
display: block;
}

A continuación os dejo enlace a un pantallazo de cómo se ve:
http://naiarafernandez.com/img/pantallazo-menu-responsive.jpg

Y aquí de cómo quiero que se vea:
http://naiarafernandez.com/img/pantallazo-menu-responsive-ok.jpg

La web es la siguiente:
http://naiarafernandez.com

Muchas gracias!!!!

Un saludo,
Naiara

superweb360 · #2 (**permalink**) 09/04/2015, 02:53

Y si utilizas este plugin para crear tu menu responsive? http://responsivemobilemenu.com

naiarafernandezruiz · #3 (**permalink**) 09/04/2015, 04:10

Prefería hacerlo a través del CSS para que la web me quede más limpia, cuantos menos plugins mejor! ¿Alguna otra alternativa?

mardojai · #4 (**permalink**) 09/04/2015, 10:03

Seria de ayuda que coloques el código completo del Header, HTML y CSS.

Saludos!

EDITO: Soy tonto, xD ya vi el link de la web.

mardojai · #5 (**permalink**) 09/04/2015, 10:27

1. .title-area necesita un "margin: 0px !important;" en el responsive, para que el logo se centre completamente.

2. .site-header .widget-area le hace falta un "width: auto;" en general. Y "text-align: center;" y "width: 100%;" a la hora del responsive.

Así me quedo con esos cambios:

https://www.diigo.com/item/image/56393/xdse

Saludos!

AngelKrak · #6 (**permalink**) 09/04/2015, 13:18

amigo yo diria que quedaria mejor en bloques hacia abajo >_<

mira algo asi :D

ahi te dejo el code por si quieres hacerlo:

Buscas .site-header .widget-area y Borras width: auto;

Buscas tu media query de max-width: 480px y pones este codigo:

Código CSS:

Ver original.genesis-nav-menu .menu-item {
    display: block;
    text-align: center;
}

mardojai · #7 (**permalink**) 09/04/2015, 13:39

Buen aporte @AngelKrak, es cierto, los menús en móviles quedan mejor en vertical, +1

HackID1 · #8 (**permalink**) 09/04/2015, 15:11

Buenas, me gustaría conocer donde aprender un poco más sobre los métodos de css para responsive en una página web.

Ya que es lo que más problemas me da, conocen algún tutorial y herramientas que generen el código por lo menos para irme adaptando un poco a esto del responsive, es lo único que me queda pendiente en diseño y es muy importante por las tecnologías usadas actualmente (tablets y móviles)

Saludos

mardojai · #9 (**permalink**) 09/04/2015, 15:19

Por aquí hay algo:
https://devcode.la/cursos/basicos/cu...ve-web-design/

Aquí hay varios capítulos que tocan el tema:
http://www.desarrolloweb.com/manuales/33/

Saludos!

naiarafernandezruiz · #10 (**permalink**) 10/04/2015, 03:24

Buenas,

Perdón por la tardanza en contestar, hasta ahora no he podido probar vuestras recomendaciones. Pero ya está, ¡CONSEGUIDO! :) Además me ha gustado tanto la idea de HackID1, que lo he puesto así. Aquí lo tenéis:

http://naiarafernandez.com/img/pantallazo-menu-responsive-perfecto.jpg

Muchísimas gracias por vuestra ayuda y aportaciones!!!

Saludos!!!