Horizon theme: drop-down menu alignment

Technical Q&A
19

CODE UPDATE:

Shopify has changed the structure of the Header in 3.3.0

It needs extra CSS code now:

.header__underlay {
  display: none;
}

.menu-list__submenu-inner, .overflow-menu::part(overflow-list) {
  transform: none;
}

.header-menu .menu-list__submenu, 
.overflow-menu::part(overflow) {
  background: var(--color-background) !important;
  top: 100%;
}

.overflow-menu:has(button.menu-list__link:hover)::part(overflow) {
  visibility: visible;
}

Complete code is

<style>
li.menu-list__list-item {
  position: relative;
}
.menu-list__submenu-inner, .overflow-menu::part(overflow-list) {
  transform: none;
}

.header-menu .menu-list__submenu, 
.overflow-menu::part(overflow) {
  background: var(--color-background) !important;
  top: 100%;
}

.overflow-menu:has(button.menu-list__link:hover)::part(overflow) {
  visibility: visible;
}

.header-menu .menu-list__submenu,
.overflow-menu::part(overflow) {
  min-width: fit-content; 
  width:max-content;
  box-shadow: 2px 4px 8px 0px rgba(var(--color-border-rgb) / 0.1);
  clip-path: none;
  --submenu-padding-block-start: 0.5rem;
  --submenu-padding-block-end: 0.5rem;
}

[slot=overflow] .menu-list__submenu {
  box-shadow: none;
}

.overflow-menu::part(overflow) {
  right:0;
  left: auto !important;
}

.header-menu .menu-list__submenu.at-right {
  left: auto;
  right: 0;
}

.menu-list__submenu .mega-menu, overflow-list {
  --full-page-grid-with-margins: 1.25rem 1fr 1.25rem;
}

.mega-menu__grid {
  display: flex;
  min-width: max-content;
}

ul.mega-menu__list.list-unstyled {
  display: flex;
}

.overflow-menu:after,
.header__underlay {
  display: none;
}

overflow-list.overflow-menu {
  position: relative;
}

</style>
<script>
window.addEventListener('load', () => {
  
  let topSubMenus= document.querySelectorAll('[header-menu] .menu-list__submenu');
  
  let checkMenus = () => {
    if (window.innerWidth < 750) return; /* mobile drawer active */
    console.log('Check menus');
    topSubMenus.forEach( e=> {
      let p = e.parentElement;
      let er = e.getBoundingClientRect();
      let pr = p.getBoundingClientRect();
      if ( (pr.left + er.width) > window.innerWidth ) {
        e.classList.add('at-right');
      } else e.classList.remove('at-right');
    });
  };
  let debounceTimeout;
  setTimeout(checkMenus, 300);
  window.addEventListener('resize', ()=> {
    if (debounceTimeout) clearTimeout(debounceTimeout);
    debounceTimeout = setTimeout(checkMenus, 300);
  });
});
</script>

Did not test it extensively, so let me know…