Archived topic
Navigation alignment
6 replies · Started by Valtteri on November 11, 2014
Hi!
My menu alignment is set to center and when I resize my browser down to mobile size, my menu look like this:

I want it to look like this:

How can I do that?
Hi there,
That should be default - looks like something is overwriting the default style.
Can you post a link to your site so I can take a look?
Thanks!
Hi,
it isn't online yet..
Mobile menu is vertical only when alignment is set to left. When alignment is center or right, mobile menu is horizontal.
I want mobile menu to be vertical even if menu alignment is set to center.
Thanks.
Secondary navigation works like it should on mobile... (same settings as in the main navigation).
Ah - you found a bug!
This has been fixed in the next version of GP.
If you'd like to apply the fix now, add this to your CSS:
@media screen and (max-width: 768px) {
.nav-aligned-right.nav-below-header .main-navigation .menu > li,
.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-right.nav-above-header .main-navigation .menu > li,
.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-below-header .main-navigation .menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-above-header .main-navigation .menu > li,
.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
display: block;
margin: 0;
text-align: left;
}
}
I added the code to Custom CSS and it works :)
Thank you for your great support!
Happy I could help! :)