Automatically expanded sub links in Pro off canvas menu - Header Builder

[bangak]

Is there a way to have sub links in the off canvas menu be expanded (with no option to collapse, if possible) all the time?

If that’s confusing, read on.

The idea is that upon clicking the off canvas menu button you’d see a list of all pages and their children (underneath), essentially mimicking what would happen if you manually expanded every sub link item initially.

In addition to that, I’d hope to be able to make the parent page link clickable so you can navigate to the parent/landing page. Removing the ability to expand/collapse would hopefully fix that?

Quick mockup of what I’m after:

Thank you!

[lely]

Hello There,

Thank you for the screenshot. To make the sublinks visible by default, try using this custom CSS:

.x-off-canvas-content ul.sub-menu {
    display: block !important;
}

Then to make it go to the landing page, please try this thread: https://theme.co/apex/forum/t/parent-menu-item-not-clickable-on-mobile/4257/8. There is temporary suggestion.

Hope this helps.

[bangak]

Thanks! Submenus are now expanded and top level links with children are linking as requested after adding the CSS / JS. The only minor sticking point is that when you click a top level link that has children it causes the collapse/expand animation to fire in quick succession.

Is there anyway to disable that animation from happening altogether?

Thank you

[ruenel]

Hey There,

You may stop the click propagation of the parent menu items by using the JS code in this thread: https://theme.co/apex/forum/t/pro-menu-not-clickable-on-mobile-if-it-has-a-submenu/8325/7

Hope this helps.

[bangak]

Tried everything available on that thread with no luck. The only JS that seemed to mention stopping propagation, specifically tried to avoid doing just that.

Any other pointers on how to lock the sub menus all to the open position and completely disable the ability to close them?

Thank you

[ruenel]

Hello There,

You can use a custom css to disable any click events in your menu items. The problem is that you won’t be able to click it to go that page either. You can test it out by adding this code in your Theme Options custom css:

.x-off-canvas-content .menu-item-has-children .x-anchor {
    pointer-events: none;
}

And please make sure that you are using the latest version which is Pro 2.0.4

Hope this helps.

[bangak]

Thanks - not really what I was after considering that would make the menu totally useless.

That said, you did point me in the right direction to accomplish this. For those interested in how I made it work here’s the code I used:

JS

jQuery(document).on('click', '.x-menu a.x-anchor-menu-item ', function(event){
    if(jQuery(event.target).hasClass('x-anchor-sub-indicator')) {
    	event.preventDefault();
    } else {
    	var url = jQuery(this).attr('href');
    	window.location = url;
    }
});

CSS

/*Displaying inline stops propagation of collapse animation*/
.x-off-canvas-content ul.sub-menu {
    display: inline !important;
}

/*Correction for using inline on sub-menu li elements*/
.x-off-canvas-content ul.sub-menu li {
padding-left:20px;
}

[paul.r]

Hi,

Thanks for sharing the code.

Have a nice day!