Helix Ultimate: Offcanvas Menu Toggler Full Line Instead Of Only Right Arrow?
Peter Hunkeler
I'm using Helix Ultimate 2.0. I would like to change the behaviour of the offcanvas menu. As it is now, only the right arrow is clickable and opens the submenu (menu toggler). Id rather have thole menu heading (text up to, and including the right arrow) to be clickable. Is there a way to expand the scope or the "menu toggler" to the whole line?
I'v read the Helix Ultimate customization tips, and am aware of the possibility to have all submenu items displayed ("Offcanvas Menu: How to display all submenu items") but this only the second best option.
Regards Peter
Rashida Rahman
Accepted AnswerHi there!
Thanks for contacting us.
Your site URL would be better here. However, I am giving you sample code from my end:
body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
width: 100%;
text-align: right;
}If you do not have any link to the parent menu items then this will work well. Please use the above code in your custom CSS.
Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Best Regards
Peter Hunkeler
Accepted AnswerThanks for the quick answer.
I did have to change main menu entries of type "heading" to type "alias" for the modification to work, just as you mentioned. Not an issue.
My site is still in development under URL https://dev.reitcoach.ch. The target URL https://reitcoach.ch is currently a placehoder, only. The forum Q&A template does not allow the selection of a subdomain, but only the registered domain. That why I could not select the dev site.
Rashida Rahman
Accepted AnswerYou're welcome:)
I have checked your site and you need to add this selector also to make the third item working as expected:
body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.nav-header>.menu-toggler
Best Regards
Peter Hunkeler
Accepted AnswerThanks for the additional selector. Great, because now I don't have to create the top level entries as Alias to "pseudo" pages, but can leave them as menu headings, which I prefer.