How to centre a Superfish dropdown menu

Published 19 Jan 2013 in Development, HTML & CSS, JavaScript & jQuery, Themes, Usability, WordPress by ZigPress

This is a great little tip I found a while ago which has been sitting in my Wunderlist ever since. I can’t recall where I originally picked it up and so I thought I’d share it here.

The jQuery Superfish menu plugin provides a practical, usable dropdown menu system which is highly cross-browser compatible and fairly easy to implement. There are various WordPress plugins based on it but to be honest I tend to implant the jQuery plugin straight into my theme code when I’m creating a custom WordPress theme.

One thing with the jQuery plugin as supplied is that menus can be aligned to the left or right but cannot be centred. This small CSS tweak lets you centre a horizontal Superfish menu within a container.

1. Get the plugin from the official URL. There you’ll also find a guide and some implementation examples.

2. Unzip it into your project and open the superfish.css file (in the css subfolder). This is where we make the amendments that will allow the menu to be centred.

3. Go to line 54, just before the ‘DEMO SKIN‘ comment, and insert the following code:

[code]/* Centre the Menu */
.sf-menu {
float: left;
position: relative;
left: 50%;
}
.sf-menu ul li {
left: 0%;
}
.sf-menu li {
left: -50%;
}[/code]

4. Continue with your own styling changes as required.

The menu will now centre within its containing element.

30 Comments

  1. On 21 Jan 2013 at 00:13, Eslam said:

    is there any demo site for this ?

  2. On 24 Jan 2013 at 12:25, ZigPress said:

    I have implemented it on cloudberryimages.com.

  3. On 28 Jan 2013 at 23:50, Ragenah said:

    nice tutorial :)

  4. On 03 Feb 2013 at 16:35, AR Patel said:

    i will try to implement on my website………….

  5. On 05 Feb 2013 at 23:33, George said:

    I was looking something like this to replace my menu. Thanks

  6. On 07 Feb 2013 at 21:12, Damzak said:

    Thanks for this tutorial, i’ll try it soon…..

  7. On 13 Feb 2013 at 17:13, webdude said:

    I’ve always had issues with css, thanks for clearing up an issue i was having with my menu.

  8. On 15 Feb 2013 at 20:39, aziz said:

    You saved my life bro, thank you very much!

  9. On 16 Feb 2013 at 11:59, yassine said:

    Thank you very much for the info , Nice post and great article. Good work

  10. On 21 Feb 2013 at 02:46, Wadowice said:

    Interesting tutorial, good for beginners.

  11. On 22 Feb 2013 at 21:30, Liam said:

    I can now cross this off of my Wunderlist :). Your tips are always simple and practical, thank you.

  12. On 06 Mar 2013 at 16:11, Under One Roof said:

    Hi i’m just wondering is there a way i get this working with a weebly website?
    I know wordpress sites are the way to go….however i’m already paid up with weebly so something like this would be huge help to my site, any tips please?

  13. On 09 Mar 2013 at 20:29, morty kane said:

    just what i needed, thanx 4 posting

  14. On 23 Mar 2013 at 11:01, Nia said:

    Quick and easy tips for beginners :)

    And for those who understands CSS, giving themes to the menus can be a lot easier with a lot of options

  15. On 24 Mar 2013 at 17:13, Jay said:

    Maybe you should try and add some videos to your posts, great read thanks

  16. On 27 Mar 2013 at 09:04, John Ren said:

    I was searching for this. Thank you so much..

  17. On 28 Mar 2013 at 03:22, James said:

    I was looking something like this to replace my menu. Thank you so much!

  18. On 29 Mar 2013 at 20:10, kasynarenomowane.pl said:

    Ive found this very usefull thanks dude :)

  19. On 11 Apr 2013 at 09:47, Mark said:

    This could be really useful, I’m going to try and implement it on my website now. Thanks.

  20. On 19 Apr 2013 at 16:14, Entremattor said:

    Superfish is deffenetly sweet! We are building a WP site right now so all tips are very helpful! Keep up the good work!

  21. On 27 Apr 2013 at 18:13, Arnold Layne said:

    Nice tip.Thx.

  22. On 08 May 2013 at 04:49, Laptop Repair Adelaide said:

    I’ve always had issues with css, thanks for clearing up an issue i was having with my menu.

  23. On 09 May 2013 at 20:54, transporta pakalpojumi said:

    Nice post! Thank you very much for the info.

  24. On 26 May 2013 at 20:23, Covert Store Builder said:

    I’m amazed, I must say. Rarely do I encounter a blog that’s both equally educative and entertaining, and without a doubt, you have hit the nail on the head. The problem is an issue that not enough folks are speaking intelligently about. I am very happy that I found this in my search for something concerning this.

  25. On 10 Jun 2013 at 12:12, Claudia Bellings said:

    I had to work hard but now it is working. :) Thank you for your advice.

  26. On 10 Jun 2013 at 16:45, Rick Miles said:

    Dropdowns had been the bane of my existence until recently. Nice article!

  27. On 17 Jun 2013 at 22:41, Essence said:

    Nice post managed to solve an issue I was having, thx

  28. On 25 Jun 2013 at 03:21, graphic design girl said:

    oh god great info finally…thank you very much for sharing

  29. On 28 Jun 2013 at 02:59, Home Design Interior Kitchen Design Decorating Ideas Bathroom Bedroom said:

    Thank you very much for the info. I am very happy that I found this in my search for something concerning this. Superfish is deffenetly sweet! We are building a WP site right now so all tips are very helpful! Keep up the good work!

  30. On 30 Jan 2015 at 01:25, Eireen said:

    Hooray! Thank you!

Add a Comment

If you have used this form and would like a copy of the information held about you on this website, or would like the information deleted, please email [email protected].