[Resolved] Little arow in dropdown menu items

[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 http://www.homepage.com/# 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 .

[Tom]

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: https://wordpress.org/plugins/generate-legacy-mobile-menu/

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 ?

[Tom]

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 ?

[Tom]

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

You can also use images: https://css-tricks.com/almanac/properties/c/content/

[Adrian Cojocariu]

Uuuuu I see. Thanks man !

[Tom]

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 http://www.wisefoolnewmexico.org

[Jamal]

Hi

Have you tried this? https://generatepress.com/forums/topic/dropdown-navigation/#post-204613

[Author]

Posts