How to remove arrows from superfish menu

Note: Joel updated me via comments about the recommended way of removing arrows from superfish menu. I’m quoting his comment here.

The recommended way to do this is to set the “autoArrows” option to false when initialising Superfish.

$(‘#yourmenu’).superfish({
autoArrows: false
});

Check out the bottom of the page under the “options” tab on the Superfish docs (linked in my name) for another example.

The original post is not being removed for reference and alternate method.

Superfish is a nice jquery drop down menu which is used by many webmasters undoubtedly!

While using superfish menu on one of my clients website he wished to have the arrows for the menu items with sub items – removed.

If you want to remove superfish arrow, follow these steps:

How to remove arrows from superfish menu

Removing superfish arrow required 2 steps:

1. Remove superfish arrow from javascript file

Goto superfish.js file and remove » (code for arrow) changing following line of code:

From:

$arrow = $(['<span> &#187;</span>'].join('')),

To:

$arrow = $(['<span></span>'].join('')),

2. Remove superfish arrow CSS code from the css file

2nd step is to remove the css code related to superfish menu arrows from the superish.css (or any other file that you’re using for your menu)

Remove the code related to the “arrow” (you can search for it – it’s all in one block – almost – keep a backup though!)

Don’t forget to keep a backup of original superfish menu files incase anything goes wrong!

2 comments on “How to remove arrows from superfish menu

  1. The recommended way to do this is to set the “autoArrows” option to false when initialising Superfish.

    $(‘#yourmenu’).superfish({
    autoArrows: false
    });

    Check out the bottom of the page under the “options” tab on the Superfish docs (linked in my name) for another example.

Leave a Reply

Your email address will not be published.