Superfish Menu – How to remove arrow from top level
I really enjoy using Superfish to create menus. It is a great tool for adding some great menu features. Recently, I had a project that required removing the nav arrows from the top-level only. These arrows tell the user whether the menu item has a sub-level, but the current client did not want this feature for the top-level items.
Pre-Req – Requires a beginner’s level knowledge of the following
- WordPress 2.9+
- HTML
- jQuery/javascript
- CSS
I searched the net for a solution, but failed to find a working one. I did find some references to help me in the direction, but the code was for a previous version of the Superfish menu script (see the references section for the link).
In order to remove the arrows change the following in superfish.js:
if (o.autoArrows) addArrow( $('>a:first-child',this) );
to this:
if ((o.autoArrows) && ($('ul .sub-menu li:has(ul)',this).length == 0)) {addArrow( $('>a:first-child',this) );}
This works using the WordPress 3.0 menu system, but could be easily changed by editing “sub-menu” to whatever class is wrapped around the 2nd level items.
References
http://users.tpg.com.au/j_birch/plugins/superfish/
http://old.nabble.com/Superfish—removing-arrow-from-top-level-td20230964s27240.html
