Archived topic

Little arow in dropdown menu items

9 replies · Started by Adrian Cojocariu on July 4, 2015

Viewing posts 1–10 of 10

July 4, 2015 at 11:56 am #118628

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 :D

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

July 4, 2015 at 9:52 pm #118695

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 :)

July 5, 2015 at 2:22 am #118707

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 ?

July 5, 2015 at 9:33 am #118812

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 :)

July 5, 2015 at 1:01 pm #118844

That's just great thanks !

I learned about unicodes today :D

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 ?

July 5, 2015 at 11:52 pm #118911

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/

July 6, 2015 at 6:53 am #118955

Uuuuu I see. Thanks man !

July 6, 2015 at 9:04 am #118969

No problem!

June 28, 2016 at 11:11 am #205150

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

June 28, 2016 at 12:05 pm #205163

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

This archived topic is closed to new replies.

Start building better websites today.