The Sub Menu Problem

In the default position the sub menu works as expected

But in the current position or when stacked using Twentig it overlaps and obscures the item above.

Temporary fix (breaks the original design)

/* messy menu hack */

@media screen and (min-width: 810px)  {

ul ul ul.sub-menu {
	margin-left: -207px;
}

body:not(.overlay-header) .primary-menu ul ul::after {
	margin-left: 182px;
	}
}

Or as the doctor ordered:-

/* target the inline-left and stack layout */

.tw-header-layout-inline-left .primary-menu li.menu-item-has-children:is(:hover,:focus,.focus) > ul {
    left: 0;
    right: auto;
}

.tw-header-layout-inline-left .primary-menu ul li.menu-item-has-children:is(:hover,:focus,.focus) > ul{
    left: calc(100% + 2rem);
}

.tw-header-layout-inline-left .primary-menu ul ul::before {
    right: auto;
    left: -2rem;
}

.tw-header-layout-inline-left .primary-menu ul ul::after {
    right: auto;
    border-left-color: transparent !important;
    border-right-color: #000;
    left: -1.6rem;
}

/* stack menu */
.tw-header-layout-stack  .primary-menu li.menu-item-has-children:is(:hover,:focus,.focus) > ul {
    left: 0;
    right: auto;
}

.tw-header-layout-stack  .primary-menu ul li.menu-item-has-children:is(:hover,:focus,.focus) > ul{
    left: calc(100% + 2rem);
}

.tw-header-layout-stack  .primary-menu ul ul::before {
    right: auto;
    left: -2rem;
}

.tw-header-layout-stack  .primary-menu ul ul::after {
    right: auto;
    border-left-color: transparent !important;
    border-right-color: #000;
    left: -1.6rem;
}