Aweber - Email Marketing Made Easy
Center Navigation Horizontally in Thesis

Center Navigation Horizontally in Thesis

July 3, 2011 · 6 comments

in Thesis

Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

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.

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 6 comments… read them below or add one }

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: