Twenty Eleven – How to Center Navigiation Menu?

Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

Hi Esmi, thanks, child themes are great for fiddling around, but still.. any know how on how to fix it? Rich.

Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

Try this in a child theme of twenty eleven, just copy the twenty elevent style.css to the child theme directory:

here are the changes in the CSS, you’ll have to find the appropriate places in the CSS (or use the !important tag in a blank style.css). These are not intended for direct cut and paste, but they are the relevant CSS to modify to get the nav to align center.

delete from
#access { float:left; }

add to
#access { text-align:center; }

add to
#access ul { display:inline-block; }

edit margin in

#access div {
	margin: 0 0 0 0;
}

Hope this helps!

Thanks Bozz Media, Just what I was looking for.
And Thanks EnglishSpy for posting the question.

My pleasure, glad it helped!

Hello, I am having this problem as well. I was able to change the font and color of the navigational bar in my child theme, but can’t figure out how to center the menu items. I tried the CSS above and it moved things around a bit, but it did not center them. Any help would be greatly appreciated. Website below.

https://keturahdavis.com/testsite/

I am having the same problem. I can’t seem to move them over even with the code above.

https://www.billystarponturtle.com/contact

keturah, add this code at the end of your styles.css.

The menu div has a padding-right of 250px, thats why doesn’t appear centered.

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

You have the same problem @billystarponturtle, just remove the padding-right

I’m sorry, when zero is always zero ??

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

Thanks so much!

This seemed to work but for some reason, with these changes, my navigational bar got a bit taller or thicker than it was before and the hover block doesn’t match up. There is extra purple space under the white hover block. I looked at @billystarponturtle’s site and his is doing the same. Is it something in the hover code that need to be changed?

Thanks in advance!

Can any of you please help me out? I have tried and tried copying the coding above into my twentyeleven-child theme/style.css and I can’t get the pages under my header “Cheeky Mouth” to center.

Can you help? Her is a link to the site:
https://www.cheekymouth.com

Finally got it. I used the Bozz’s code above, THANKS A TON!!!!

Hi,

I’ve followed all the code, but my menu bar is now a little taller and the hover block doesn’t line up. It doesn’t reach to the bottom of the menu.

How do I either increase the hover block or return the menu to be a little thinner?

thanks.

https://truenorthalliance.com/blog/