How to center your Thesis menu

I’ve seen a lot of Thesis theme users struggling to center align their main navigation menu, and it really isn’t that hard to do. Here’s a 3-minute fix to get you on the right track. In this tutorial I make the following assumptions:

  1. You’re using the Thesis Menu, not the WordPress 3.0 menu system.
  2. Your menu is positioned above your header (the default in Thesis).
  3. EDIT: You aren’t using dropdown menus, because I haven’t figured that solution out yet.

Before we start, you should note that anyone can do this. Don’t let these 11 lines of code scare you, OK?

Step 1 – Wrap your Thesis menu in a div

In order to make this method work you need to wrap your navigation menu in a containing div, then assign some CSS to that div. This containing div is the key and the menu won’t work without it.

  1. Open your Thesis custom_functions.php file (you can find it in the ‘custom’ folder, which is in your Thesis theme folder).
  2. Add the following code to your custom_functions.php file:
function custom_nav() { ?>
<div id="menu_container">
<?php thesis_nav_menu(); ?>
</div>
<?php }
remove_action('thesis_hook_before_header' , 'thesis_nav_menu');
add_action('thesis_hook_before_header' , 'custom_nav');

What we’re doing:

  • We’re adding a new function called ‘custom_nav’.
  • We’re creating a container,
  • We’re inserting the Thesis navigation menu into the menu_container
  • We’re closing the div
  • We’re removing the default Thesis menu from our theme.
  • And finally, we’re telling Thesis to add back our new menu function.

You can save your custom_functions.php file now. We’re done with it.

Step 2 – Add some CSS to center your menu

Open your custom.css file (you can find it in the ‘custom’ folder, which is in your Thesis theme folder). Add the following:

#menu_container {overflow: hidden;}
.menu {float:left; left:50%; position:relative; width:auto;}
.menu li {float:left; position:relative; right:50%;}
.menu a {display: block; float: left;}

What we’re doing:

What we’re doing here is complicated and I don’t fully understand why it works, but it does. If you’re curious, here’s what we’re doing:

  • We’re adding a style for the #menu_container, simply giving it an overflow:hidden to avoid any layouts below the menu breaking.
  • We’re floating the .menu (within the container) to the left, and giving it a position of 50% from the left hand side.
  • We’re floating each menu item (.menu li) left, then positioning them 50% from the right hand side.
  • We’re assigning a block style to each menu link (.menu a), and floating it to the left.

You can save your custom.css file now and preview your site. If you followed the 2 steps above your menu should now be positioned horizontally in the middle of your web page.

Did it work? Let me know in the comments.

  • http://www.adambaird.net Adam Baird

    Dave,

    Major problem here! Drop downs will be hidden…will they not?

  • Dave

    Hi Adam, no, it doesn’t play well with dropdowns. I’ve yet to figure out a good way to work with dropdowns centered. Suggestions?

    EDIT: Actually, I just took a quick look at my code and I’m pretty sure this will work with dropdowns after I’ve added a couple of modifications. Stay tuned for part 2.

  • http://ZaidPirwani.com Zaid Pirwani

    “What we’re doing here is complicated and I don’t fully understand why it works, but it does. ”

    Glad to know that I am not the only one with this kind of problems….

    Thanks for a good tutorial, I myself have centered the menu on many Thesis sites, but every time I forget it and need to see the code of my older sites, now I will just bookmark this page….. THANKS

    hey: where is part 2

  • http://recursiveloop.net/ Phil Barron

    There’s a simpler approach. Define the width of .menu, apply margin:auto, bosh, you’re centered!

  • Dave

    Hi Phil, I can’t remember why, but your method hasn’t worked for me in the past. I’ll put together another demo using your approach and try to break it. No doubt IE will oblige. Either that or I’ll feel like an idiot. Again.

  • Dave

    @Zaid, part 2 will be coming once I figure out what needs to be done to make this work with dropdowns.

  • http://www.adambaird.net Adam Baird

    @Phil,

    Also, that doesn’t play well if you’re working with clients who want the ability to change the items in their menu…

    @Dave,
    Add a div with “clear:both;” applied below it. That’s one quick and dirty option…I could probably figure something out if I had time to play with this on a demo site.

  • Laura

    Would love to know if/when you figure out the drop downs. Otherwise, great solution!

  • Laura

    Actually, I just found something on another site that works with drop down menus. Thought I’d share:

    ul.menu {text-align:center;}
    ul.menu li {display:inline; float:none;}
    ul.menu li a {display:inline-block;}

    Then add this to make your drop down list text align left:
    ul.menu li ul {text-align: left;}

  • Pingback: links for 2010-09-29 | Ronaldo Richieri

  • lorna

    Hi and many thanks. I am a complte beginner and these code terrify me. I took the plunge and did as you instructed. And it centered as you said it would but….now I have two ‘home tabs’ and two ‘about’ tabs, and I can’t figure out how to remove them.

    I would be grateful if you could help

    Many thanks

  • Dave

    @Laura thanks for the comments and your solution. I’ll add this to my demo and see if it works. If it does, I hope you don’t mind me adding the solution to my tutorial.

    @Lorna, sounds like you’ve forgotten to assign your WordPress menu to a location. If you check the Appearance > Menus section in the Dashboard you’ll see a box on the top left that says ‘Theme Locations’. Within this box there’s a dropdown that says ‘Primary Menu’. Choose the WordPress menu you created and save. This should fix your problem.

  • lorna

    Hi Dave,

    Thank you, I tried that and it still didn’t not work. I back stepped to undo everything I had done, to get it back to its original form. Unfortunately I now can not access my site and the only thing I can now see is a white page saying

    Parse error: syntax error, unexpected $end in /home/sites/socialstars.co.uk/public_html/wp-content/themes/thesis_18b1/custom/custom_functions.php on line 80

    Oh dear, what have I done…I told you I was a complete beginner :)

    Can anyone help please?

  • http://letusbuzz.com sudipto

    Hi Dave,
    Your method does not work with submenus and also my IE is not properly displaying the menu. So I would like to share this find of mine for centering menu. It works well with submenus and is also compatible with all browsers. Have a look.

    http://letusbuzz.com/2011/02/how-to-center-align-menu-thesis-theme-for-wordpress/

    • Dave

      @Sudipto your method works quite nicely. It isn’t exactly semantically correct but it does the job. I’ll update this tutorial to reflect your code.

  • http://virtualwayfarer.com AlexBerger

    Thanks, worked great and I have no clue what I’m doing. Sign of a great walk-through. I also managed to drop it below my header vs. having it over it without any issue.

  • http://pranabdoley.com Pranab Doley

    Awesome! Your code worked like a charm!

  • http://www.deconstructingthehome.com Natalie

    Thanks Laura! That did it for me with my drop down problem. This is what I posted on my css page before my custom navigation informationa;

    ul.menu {text-align:center;}
    ul.menu li {display:inline; float:none;}
    ul.menu li a {display:inline-block;}
    ul.menu li ul {text-align: left;}

  • http://www.onclickdeals.com/ Dave

    Well, after hours of trying to figure out how to center my menu over the past months, I finally got it working. I initially went with your suggestion which worked for having it centered, but then I tried Phil Barron’s idea and it worked as well, and it also allowed me to keep the menu left aligned with the other content which is what I’ve been trying to do for months. I simply added the total of the thesis colums, and used that as the width, did margin auto, and presto chango a properly aligned menu. Incidentally I’m also using the WordPress menu system, but I got my menu wrapped in a thesis div as well, so no probs there.
    Dave

  • http://beautifulspitup.com Eve

    I’m working designing a new site and googled how to center a nav bar in thesis and found your tutorial. It worked PERFECTLY! Thank you, Dave!

    • Dave

      Excellent! Just remember this only works for navigation with no drop downs.

  • Tim Gregg

    THANK YOU DAVE!

    I’ve been looking for a solution like this for the last two hours. You’ve saved the day!

    Keep up the good work.

    Cheers
    Tim

  • http://dotcomcell.com mazdodot

    Your code worked in my site! Great…Thanks Dave.

  • http://eedeedesignstudios.com Erin

    This worked really well for my client’s site, but the drop down isn’t working. I don’t think they’ll be adding a dropdown, but do you have any solutions for this?

    Thanks for the code!

  • http://katemgilbert.com Kate

    Laura’s fix worked great for my Thesis site in all browsers, while Dave’s original code had my menu div hanging off the right side of the site due to the left: 50%; declaration.

    Here’s the code that did the trick for me:
    ul.menu {position: relative; width: auto; text-align:center;}
    ul.menu li {display:inline; float:none;}
    ul.menu li a {display:inline-block;}
    ul.menu li ul {text-align: left;}

  • http://accountsreceivablefactoring.me/ She Said

    Wasn’t sure if this edit would work as it’s a couple years old but saw Laura’s post about halfway down and it worked for me. Thanks!