Twenty Eleven – Aligning to Center the Navigation Menu – CSS

  • Author
    Posts
  • #1094356

    tiagodovale
    Member

    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 tiagodovale.com.

    #1094643

    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;
    }
    #1094645

    tiagodovale
    Member

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

    #1094647

    tiagodovale
    Member

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

    #1094648

    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;
    }
    #1094649

    tiagodovale
    Member

    Thanks again :)

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