[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
    Posts
  • #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 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 .

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

    Let me know if that does the trick or not 🙂

    #118707
    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 ?

    #118812
    Tom
    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 🙂

    #118844
    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 ?

    #118911
    Tom
    Lead Developer
    Lead Developer

    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/

    #118955
    Adrian Cojocariu

    Uuuuu I see. Thanks man !

    #118969
    Tom
    Lead Developer
    Lead Developer
    #205150
    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

    #205163
    Jamal

    Hi

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

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

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