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 }

Anna July 28, 2011 at 3:13 am

Thanks dude!! I looked for a solution to this for ages! And yours was the easiest and best one! :)

Reply

Thesis-Blogs.com July 28, 2011 at 7:55 am

Yes, I’d also searched for ways to do this and there are a few methods out there, but this one was the easiest to implement. Credit goes to Harry of csswizardry.com where I found this and then just adapted very slightly for Thesis.

Reply

Hrvoje Volarevic September 3, 2011 at 10:04 pm

Thank You, this really works!! I spent a lot of time trying to figure this out…
This is perfect! thanks!
Hrvoje Volarevic recently posted..Proba

Reply

lizzie - strayed from the table August 8, 2012 at 10:37 pm

Thanks for sharing, it worked perfectly.
lizzie – strayed from the table recently posted..Spicy Pumpkin Soup – Recipe

Reply

Anchal Bhatia April 8, 2013 at 12:37 pm

Hey, it worked great for me. Thanks!!!
Anchal Bhatia recently posted..Couple Spa Therapies to Spice up your Love Life

Reply

Lauren August 8, 2013 at 7:56 pm

Thank you! This worked perfectly. :)

Reply

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: