WordPress.com Forums » Topic: Twenty Eleven - Aligning to Center the Navigation Menu - CSS

tiagodovale on "Twenty Eleven - Aligning to Center the Navigation Menu - CSS"

tiagodovale — Sat, 29 Dec 2012 21:29:45 +0000

Thanks again :)

designsimply on "Twenty Eleven - Aligning to Center the Navigation Menu - CSS"

designsimply — Sat, 29 Dec 2012 20:14:07 +0000

Once the menu elements wrap to two lines, the menu block itself is pretty much full width, so it is in fact centered. The list elements inside the menu are floated left, so there isn't really a way to center those after they fall over to two lines. To see how the menu spacing is working, you can add a temporary border and then look at the blog sized to different widths to see what I mean:

#access ul {
	border: 1px solid red;
}

tiagodovale on "Twenty Eleven - Aligning to Center the Navigation Menu - CSS"

tiagodovale — Fri, 28 Dec 2012 19:16:09 +0000

Hi again!

:) Sorry to be nitpicking on this...
It worked: the menu is centered when we seen the full-sized page!
But when we star collapsing it to smaller sizes, like a smartphone display, the menu aligns to the right..

Any ideas?
Cheers :)

tiagodovale on "Twenty Eleven - Aligning to Center the Navigation Menu - CSS"

tiagodovale — Thu, 27 Dec 2012 19:22:17 +0000

That did the trick!! :) You're priceless!
Thanks

designsimply on "Twenty Eleven - Aligning to Center the Navigation Menu - CSS"

designsimply — Thu, 27 Dec 2012 19:07:22 +0000

To center the menu in your current setup, give this a try:

#branding .only-search + #access div {
	padding-right: 0;
}

#access {
	text-align: center;

}

#access ul {
	display: inline-block;
	margin: 0;
	padding: 0;
}

tiagodovale on "Twenty Eleven - Aligning to Center the Navigation Menu - CSS"

tiagodovale — Tue, 11 Dec 2012 18:17:42 +0000

Hi again, everybody...

I've spent a few hours testing every single suggestion I found around the forum, but with no results..

How can I edit my CSS so that my navigation menu is centered on the page? Any ideas?

Thank you so much!!