Black Friday Sale! Get up to $40 off GP Premium!Learn more

Expand subnav menu when pressing main nav menu

Home Forums Support Expand subnav menu when pressing main nav menu

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #177546
    Fernando Díaz Gascón

    Hello,

    When I hover the main navigation menu, the sub-navigation appear. In mobile case, hover has no sense, so I have to press the symbol that appear at the right to display submenus (lets call this symbol “arrow”).
    Due my main menu elements that have submenus are not linking to any page, I put ‘#’ as link. But in mobile case, when you press on them, nothing happens and it looks like an error.
    What I would like is that when you press in the main menu elements with submenu, the submenu displays. In other words, that the main menu element works as the arrow. Do you know some way to do this?

    Thanks a lot.

    #177602
    Franz

    We are also in urgent need of this feature. On mobiles the submenue should be opened not just by pressing the small arrow but also when pressing somewhere in the same line. I suppose the majority of users think the submenue is not working and have problems with the navigation. This is a absolutely no-go.

    Please fix it. Thx a lot!

    P.S. We already tested your plugin “Generate Legacy Mobile Menu” however it’s not working with WP 4.4.2. (no function at all).

    • This reply was modified 4 years, 8 months ago by Franz.
    #177640
    Tom
    Lead Developer
    Lead Developer

    I just built this into the next version.

    Basically, it will check to see if the URL is # or empty, and it will display the sub menu on click.

    You can give it a try now by adding this into GP Hooks in the “wp_footer” hook:

    <script>
        jQuery( document ).ready( function( $ ) {
            $( document ).on( 'click', '.main-nav .menu-item-has-children > a', function( e ) {
                // Get the clicked element
                var _this = $( this );
                var mobile = $( '.menu-toggle' );
                var slideout = $( '.slideout-navigation' );
                var url = _this.attr( 'href' );
                if ( '#' == url || '' == url ) {
                    if ( mobile.is( ':visible' ) || 'visible' == slideout.css( 'visibility' ) ) {
                        e.preventDefault();
                        _this.closest( 'li' ).toggleClass( 'sfHover' );
                        _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
                        _this.attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
                        return false;
                    }
                }
            });
        });
    </script>
    #177729
    Franz

    Hi Tom,

    great it works! Just perfect…

    Thx for your kind support

    #177826
    Tom
    Lead Developer
    Lead Developer

    Perfect – you’ll be able to remove that code when you update to 1.3.28 🙂

    #178160
    Fernando Díaz Gascón

    Hello,

    I did not take time to test it. I tested and it does not work, I dont know if I am making something wrong.

    I put the code in wp_footer (I tried checking and not checking “execute PHP”). I am testing in maipacific.com.mialias.net . The navigation link is called “Conoce” and it has got a # in the url. I tried also removing the # and it does not work.

    To access to the web:
    user: maipac482
    pass: 34OnUnwQ

    #178308
    Tom
    Lead Developer
    Lead Developer

    Ah, it won’t work in the slideout menu until I release this upcoming version of GP Premium.

    Should be very soon now 🙂

    #179693
    Fernando Díaz Gascón

    Hello,

    I installed the new 1.3.28 GP version and I tested it with no good result. I tried in the mobile and . I have # in the main menu link. I have installed it in http://congruentia.es.mialias.net/

    Also, I have seen that the slideout menu appeareance looks ugly (the icon to press to appear the submenu is glued to the right). Can be due to the version change?

    Thanks in advance

    To enter in the web:
    user: congru203
    pass: hq9tTxoW

    #179733
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The next version of GP Premium has this functionality in it for the slideout menu.

    It also fixes the arrow issue.

    Working on this update really hard all day today hoping to get it out tomorrow 🙂

    #194314
    Emily

    Just ran into the same issue, have you had any luck getting the sub-menu in mobile to drop down by clicking the parent item?

    Latest updates, and script didn’t work for me. Thanks!

    #194329
    Tom
    Lead Developer
    Lead Developer

    If the URL of the parent item is #, then clicking the entire item will open the sub menu.

    #476134
    itcwiz

    Hi Tom

    I have this situation now in GP 2.0.2, I have parent item is #, but when clicking the entire item will NOT open the sub menu. Only if I click the small arrow in the right. Can you tell me what I should do? Is it a special configuration?

    #476251
    Leo
    Staff
    Customer Support

    Can you link us to your site?

    #476253
    itcwiz

    petra.it-couture.ch

    #476446
    Tom
    Lead Developer
    Lead Developer

    Your menu items don’t have # as the URL – the URLs are just empty. Can you try adding a #?

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