How to centre a Superfish dropdown menu

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. is there any demo site for this ?

  2. I have implemented it on cloudberryimages.com.

  3. nice tutorial 🙂

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

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

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

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

  8. You saved my life bro, thank you very much!

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

  10. Interesting tutorial, good for beginners.

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

  12. 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. just what i needed, thanx 4 posting

  14. 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. Maybe you should try and add some videos to your posts, great read thanks

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

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

  18. Ive found this very usefull thanks dude 🙂

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

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

  21. Nice tip.Thx.

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

  23. Nice post! Thank you very much for the info.

  24. 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. I had to work hard but now it is working. 🙂 Thank you for your advice.

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

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

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

  29. 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. 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 info@zigpress.com.