Twenty Eleven – Aligning to Center the Navigation Menu – CSS

  • Author
  • #1094356


    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!!

    The blog I need help with is


    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;


    That did the trick!! :) You’re priceless!



    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 :)


    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;


    Thanks again :)

The topic ‘Twenty Eleven – Aligning to Center the Navigation Menu – CSS’ is closed to new replies.