[Support request] Mega Menu OnClick Parent Headings

Home Forums Support [Support request] Mega Menu OnClick Parent Headings

Home Forums Support Mega Menu OnClick Parent Headings

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2249577
    Robyn

    Hi,
    I am using a MegaMenu (GP css) with 4 columns. Each column has a Heading and a submenu. I recently switched the Primary Navigation setting for Navigation Dropdown to Click – Menu Item as I want the mega menu to stay open instead of disappearing when hovering. The Headings are pages that should click through to their page and they stopped working.

    I found this thread and followed it through, installed the JS script enqueuing in footer, added a class to the Heading menu items and can see the console output – they are showing as links but still not clickable from the menu.

    https://generatepress.com/forums/topic/disable-dropdown-menu-click-on-third-level-sub-menus/

    Perhaps I missed something small? I cleared all the caches, plugins are up to date.

    #2250011
    David
    Staff
    Customer Support

    Hi there,

    try the following:

    1. Edit the Menu, and give each of the ‘broken’ parent items a CSS Class of: forced-click

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    2. Create a new Hook element in Appearance > Elements.
    Add this to the hook:

    <script>
    var customLinks = document.querySelectorAll( '.forced-click a' );
    
    for ( var i = 0; i < customLinks.length; i++ ) {
        console.log(customLinks[ i ]);
        customLinks[ i ].addEventListener( 'click', function() {
            var url = this.getAttribute( 'href' );
            console.log(url);
            window.location = url;
        } );
    }
    </script>

    Set the Hook to wp_footer
    Set the Display Rules to Entire Site

    #2250397
    Robyn

    Hi David,
    I did the above, added the Hook, added the class on the parent menu items. I can see the class is added to the li element and the console outputs the link, but the links still don’t click through to their page. I’m testing on desktop only for now. (The mobile links are broken too, but I assume it will be the same solution?)

    Menu class added:
    menu

    #2251406
    Fernando
    Customer Support

    Hi Robyn,

    I see. Can you try altering the Javascript code to this?:

    <script>
    var customLinks = document.querySelectorAll( '.forced-click a' );
    
    for ( var i = 0; i < customLinks.length; i++ ) {
        console.log(customLinks[ i ]);
        customLinks[ i ].addEventListener( 'click', function() {
            var url = this.getAttribute( 'href' );
            console.log(url);
            window.location.href = url;
        } );
    }
    </script>

    Kindly let us know how it goes!

    #2252196
    Robyn

    Hi Fernando,

    I changed the script inside my GP Element (Entire Site) and it hasn’t changed anything.
    https://snipboard.io/HUetwc.jpg

    I have the Primary Nav set to “Click-Menu Item”.

    I appreciate your help!
    -Robyn

    #2252658
    Fernando
    Customer Support

    Hi Robyn,

    I see. Thank you for testing. Can you try modifying it to this?:

    <script>
    var customLinks = document.querySelectorAll( '.forced-click a' );
    var customMenuParents = document.querySelectorAll( '.forced-click.menu-item-has-children' );
    	
    const cparentlength = customMenuParents.length;
    const clinkslength = customLinks.length;
    for ( var b = 0; b < cparentlength; b++ ) {
    	customMenuParents[ b ].classList.remove('menu-item-has-children');
    }
    for ( var i = 0; i < clinkslength; i++ ) {
        console.log(customLinks[ i ]);
        customLinks[ i ].addEventListener( 'click', function(event) {
    	event.stopPropagation();
            var url = this.getAttribute( 'href' );
            console.log(url);
            window.location.href = url;
        } );
    }
    </script>

    Then, set the priority of the element to 1.

    Kindly let us know how it goes.

    #2253358
    Robyn

    Hi Fernando!
    That works on desktop – no errors. Thank you!

    On Mobile, I’m using the OffCanvas menu – I added the .forced-click class to the menu items with submenus and now the top level clicks through to it’s page, but the dropdown doesn’t work. The ones without submenus work and click through to their page, but the four with submenus won’t allow the arrow to click the submenu visible.

    The arrows all moved up and squished to the left after the new css. I added padding-left to move them out from the text, but can’t seem to get them to move down any. Almost like it’s wrapping the whole menu item + arrow into the link?

    submenus mobile

    I appreciate your help. I’m not tied to the offcanvas layout if there is an easier way to get it to work. I just want to have the top level click to it’s page, and submenus show on arrow click. And I realize this is a different function than on the mega menu. Can they exist at the same time?

    -Robyn

    #2253603
    Fernando
    Customer Support

    I see. They can exist at the same time.

    Two things we could try(It would be good to read both options first and see what you wish to try first.):

    1. You could add this PHP snippet:

    add_filter( 'generate_hook_element_display', function( $display, $element_id ) {
        if ( 395510 === $element_id && wp_is_mobile() ) {
            $display = false;
        }
    
        return $display;
    }, 10, 2 );

    Kindly replace 395510 with the ID of your Hook Element. You can view the ID when editing the Hook as such: https://share.getcloudapp.com/5zurGm6j

    Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

    This code would disable the JS code we added on mobile.

    2. Set the Navigation Dropdown to Click – Arrow in Appearance > Customize > Layout > Primary Navigation as such: https://share.getcloudapp.com/5zurGmzj

    Then, use this JS instead, which is the initial JS we had:

    <script>
    var customLinks = document.querySelectorAll( '.forced-click a' );
    
    for ( var i = 0; i < customLinks.length; i++ ) {
        console.log(customLinks[ i ]);
        customLinks[ i ].addEventListener( 'click', function() {
            var url = this.getAttribute( 'href' );
            console.log(url);
            window.location.href = url;
        } );
    }
    </script>

    This would make the text a clickable link, and only the arrow would act as the dropdown button.

    Then we could hide the dropdown icon for the mega menu headers on tablet/desktop through CSS.

    You can try adding this CSS through Appearance > Customize > Additional CSS:

    @media (min-width: 769px) {
        .forced-click > a > span.dropdown-menu-toggle {
        display: none;
    }

    I believe your breakpoint is at 1026px so you can replace 769 with 1026 instead.

    Personally, I believe option 2 would be the better approach.

    Kindly let us know how it goes.

    #2254398
    Robyn

    Fernando (and all GP support team!) you are the BEST!

    I did option 2, went back to the original menu click JS, changed the Primary Nav to Click – Arrow and I didn’t need to add the last css bit because it was in the Mega Menu css already. Everything seems to be working now. Mega menu parent headings click through to their page on desktop and on mobile-off-canvas. Dropdowns work when clicking on arrow on mobile.

    Thank you so much!
    Have a great week.

    -Robyn

    #2254782
    Fernando
    Customer Support

    You’re welcome Robyn! Glad it’s working now!

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