The arrows of the Off Canvas items at the right are not user friendly at all.
Got many people clicking on the name of the item but nothing happends! Only opens when clicking the arrow.
This is really bad for the user.
Created this solution for people that are experiencing the same issue.
It add width of the arrow and makes it clickable.
Created using these settings with Helix Ultimate Template:
Off-canvas position: Right
Select Off-canvas position: Left Align
It is not tested yet on other websites, so you probably need to adjust it for your design.
It does have all subitems and even the menu-seperator item.
.offcanvas-menu .offcanvas-inner ul.menu > li {line-height: 33px;}
.offcanvas-menu .offcanvas-inner ul.menu > li > a {padding-left: 33px;}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler {width: 250px;margin-left: -13px;}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent .menu-toggler {width: 235px;}
.offcanvas-menu .offcanvas-inner ul.menu li.active a {padding-left: 34px;}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {padding-top: 18px;}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler::after {width: 234px;}
.offcanvas-inner ul.menu > li.menu-parent > .menu-separator > span.menu-toggler {width: 249px;}
.offcanvas-menu .offcanvas-inner ul.menu > li > span {padding-left: 34px;}
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {padding-left: 34px;}
.offcanvas-menu .offcanvas-inner ul.menu > li span {padding-left: 34px;}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
display: block;
position: absolute;
top: 50%;
cursor: pointer;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
padding: 10px;
}