Lost hours on this simple thing.

How do I center the main navigation menu in a zen subtheme?

I know that I need to :-
"change the styling from floats to inline boxes. And then use text-align: center."

Would someone be kind enough to flesh the solution out a little?

Thanks

Comments

greg.b’s picture

greg.b commented

OK........ hopes this helps someone.

I brushed up on my CSS which was a good thing.

I got it to work by adding:-

#navigation {
text-align: center;
}

#navigation ul.menu li {
float: none;
}

greg.b’s picture

greg.b commented
Status: Active » Closed (fixed)
criscom’s picture

criscom
Location Graz, Austria
commented

This only applies to a vertical menu. If you apply your code to a horizontal menu it breaks.

criscom’s picture

criscom
Location Graz, Austria
commented

Apply #navigation {text-align: center} and to ul.nice-menu li {display: inline-block; float: none;} to center the main navigation horizontally in the zen theme.