I am unable to make the off-canvas hamburger menu work satisfactorily for my website. The issue has been present for a very long time and I have ignored it because the site has been serving its purpose acceptably on desktop only. Now I need it to work on phone.

Off-canvas submenus on my site are stepping on one another so that attempts to pick result in the wrong item or no item at all are selected. Also the ">" pointer characters are overlayed in some instances.

I have attempted to correct this issue in the custom css section of the helix custom code editor but so far to no avail.

Most recently I have tried this snippet of code that was recently suggested to another poster on this forum.

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent li.menu-parent .menu-toggler { top: auto; transform: translateY(-100%); -webkit-transform: translateY(-100%); }

(note that my custom css area currently contains a stack of suggested code segments that I have tried in various ways so that not all were present at the same time)

Because this problem has been on-going for years during which I have rebuilt the entire site a couple of times, I don't believe the issue is related to overrides.

Actually I would prefer if the menu headers presented no pointing character or icon at all.

Most recently I have built the site up locally on a MAMP server and the behavior is exactly the same with a much more streamlined installation.

In a separate but related issue I have found it necessary to repeatedly login very frequently when trying to make changes to the custom code despite making sure that I have plenty of session time selected in the site's global settings. This greatly slows the diagnostic process down and it is also a problem on the locally installed MAMP site.