Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Little arow in dropdown menu items

Home Forums Support [Resolved] Little arow in dropdown menu items

Home Forums Support Little arow in dropdown menu items

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #118628
    Adrian Cojocariu

    Hey Tom, I have a little question.

    There’s a little arrow pointing down when you create a submenu.

    How can I remove that arrow on Desktop devices ?

    How can I replace it with something else ?

    And also, on mobile devices, the arrow shows on the right side, and the thing is if you click on the text, and it’s a blank link like it will kinda … reset the menu in a strange way.

    So you have to click on the little arrow in the right to toggle the dropdown.

    Can I just make it that on mobile when you click a menu item with submenu ( anywhere I click ), the submenu appears ? With the arrow still there of course πŸ˜€

    Tried to figure out myself, but it’s a little too complex for me with those :after .

    Lead Developer
    Lead Developer

    Hey Adrian,

    To remove the arrows, you can do this:

    @media ( min-width: 768px ) {
        .sf-menu li a::after {
            display: none;
        .sf-menu > li a {
            padding-right: 1.5em !important;

    As for the mobile menu thing – give this plugin a try:

    Let me know if that does the trick or not πŸ™‚

    Adrian Cojocariu

    Ow the plugin worked great indeed !

    Could you also tell me if I can change the arrow image, and also the little menu image, and write something else instead of Menu for example ?

    Lead Developer
    Lead Developer

    Arrow image

    For example, this would place a FontAwesome icon in place of the arrow, using the unicode:

    .sf-menu > li a.sf-with-ul::after {
        border: 0 none !important;
        content: "\f013" !important;
        font-family: FontAwesome;
        line-height: normal;
        margin-right: 10px !important;
        margin-top: -7px !important;

    You may have to adjust the margins depending on the shape/size of the icon.

    Menu image

    Same thing – using the FontAwesome unicode.

    .menu-toggle::before {
        content: "\f013";
        font-family: FontAwesome;

    Menu text

    You can use the build in filter.

    add_filter ( 'generate_mobile_menu_label','generate_custom_mobile_menu_label' );
    function generate_custom_mobile_menu_label()
          return 'Whatever';

    Hope this helps πŸ™‚

    Adrian Cojocariu

    That’s just great thanks !

    I learned about unicodes today πŸ˜€

    One more little thing, I can’t use html in the CSS content propriety, or can I ?

    Meaning that <i class=”icon-btc”></i> won’t work, right ?

    Lead Developer
    Lead Developer

    That’s right, you need to use the unicode in the CSS.

    You can also use images:

    Adrian Cojocariu

    Uuuuu I see. Thanks man !

    Lead Developer
    Lead Developer

    No problem!

    Jacks McNamara

    Hmmm. I’m also trying to create the same mobile menu effect (click anywhere on the main item and the sub menu automatically pops up, rather than having to click on the little arrow to make it happen, which users are finding un-intuitive and complaining about.) I tried installing the generate legacy mobile menu plugin, but nothing changed. πŸ™ the site in question is

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.