Getting really excited how SPPB and Helix Framework Ulimate are coming along with our website.

I was able to CSS modify the menu to display only the active Category and page, it's now logical and looks very professional, epecially when having a lot of sub categories.

There's just one poor user experience we need to correct regarding the mobile menu. We just need to to expand the CSS .menu-toggler touch area to encompass the full menu item row, not just the tiny chevron which is difficult to click to expand the menu. Basic users expect toughing the menu item text that it expands, just like on the Joom Shaper website.

I'd also prefer to have the chevron to the left of the menu item as well, but if we can get the text expands the menu item, it's not an issue.

Does anyone have any magic CSS tips to make this happen?

ChatGTP gave me this code, but it would require modifying the menu code to add in an extra DIV tag, which as of right now I'm not shure which files to modify, where, and in a way they don't get overwritten with future updates.

Here's the AI code suggested.

Change menu html

<li class="item-121 menu-deeper menu-parent menu-parent-open">
  <a href="#">
    <div class="menu-item-container">
      Solutions
      <span class="menu-toggler"></span>
    </div>
  </a>
  <ul class="menu-child" style="display: block;">
    <li class="item-333 menu-deeper menu-parent">
      <a href="#">
        <div class="menu-item-container">
          Web Hosting
          <span class="menu-toggler"></span>
        </div>
      </a>
      <ul class="menu-child">
        <li class="item-343"><a href="#">Magento</a></li>
      </ul>
    </li>
  </ul>
</li>

Modify CSS

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a .menu-item-container, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator .menu-item-container {
    display: block;
    position: relative;
    cursor: pointer;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator .menu-toggler {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    padding: 10px;
}