Twenty Eleven – Aligning to Center the Navigation Menu – CSS

• 

  tiagodovale · Member · Dec 11, 2012 at 6:17 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Dec 27, 2012 at 7:07 pm

  • Copy link

  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 · Member · Dec 27, 2012 at 7:22 pm

  • Copy link

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

• 

  tiagodovale · Member · Dec 28, 2012 at 7:16 pm

  • Copy link

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

• 

  designsimply · Member · Dec 29, 2012 at 8:14 pm

  • Copy link

  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 · Member · Dec 29, 2012 at 9:29 pm

  • Copy link

  Thanks again :)