Center Navigation Horizontally in Thesis

Centering your navigation horizontally across your site isn’t as easy as it sounds. There are a number of solutions I’ve come across to achieve this and most of them do the trick. I wanted to share one solution for centering a navigation horizontally that I have found works well and requires the least amount of css code.

How to Center your Navigation Horizontally

The method I’m using come from this blog and you can read more detail about it there. I have adapted it to work with your Thesis theme. Paste this into your custom.css file:

.custom .menu {
	text-align:center;
}

.custom .menu li {
	display:inline;
	float:none;
}

.custom .menu a  {
	display:inline-block;
}

I had to make one small tweak in order for it to work in Thesis. I added “float:none;” on line #7 because by default, the list items in the menu are floated to the left and that will cause the navigation to not center. You will also most likely add you own unique styling to the menu so it works with your design. This is simply the bare bones code to center it.

It would be cool if this feature was built directly into the next version of Thesis, so you can just check an option in the Navigation settings to center the menu.

• Centering List Items Horizontally (Slightly Trickier Than You Might Think)
• Create a centered horizontal navigation
• How to center your Thesis menu

Tagged as: navigation, thesis tips, web design