Solved Helix Framework

Helix Ultimate: Offcanvas Menu toggler full line instead of only right arrow?

Asked by Peter Hunkeler 3 years ago Last activity 3 years ago

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

Accepted answer

Marked as the solution

Rashida Rahman Staff

3 years ago

Hi 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

4 more replies

Peter Hunkeler Asked this

3 years ago

Thanks 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 Staff

3 years ago

You'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

https://prnt.sc/PuBbg_IowjZm

Best Regards

Peter Hunkeler Asked this

3 years ago

Thanks 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.

Rashida Rahman Staff

3 years ago

You're always welcome and glad that it helped :)