Horizon Submenu/dropdown alignment & carat

[addywells]

Hi everyone! Can anyone help me with the dropdown submenu in the Horizon theme? I’m trying to add a carat next to “support” so that it indicates to users that there is a submenu. Also trying to make the dropdown menu more like Dawn theme’s, where it’s aligned underneath the selected menu category and the white background for the dropdown is fitted to the text. I hope this makes sense but any help is appreciated. I have tried looking at some of the other posts that have asked this and it’s a little confusing for me. Thanks!

[devcoders]

Hi @addywells

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[tim_tairli]

Read this post – Horizon theme: drop-down menu alignment - #13 by tim_1
Code for newer theme versions is here – Horizon theme: drop-down menu alignment - #19 by tim_1

(and do not forget to change “Submenu feature” to None in Menu block settings in Header)

Add this to the CSS code for carets:

.menu-list__link:is(button, [aria-haspopup]) .menu-list__link-title:after {
  transform: scaleY(0.5);
  display: inline-block;
  margin-left: 5px;
  content: "\22C1";
  font-size: 0.8em;
  transition: transform linear 0.1s;
}

.menu-list__list-item:hover  .menu-list__link-title:after {
  transform: scaleY(-0.5);
}

Result should be like:

[Moeed]

Hey @addywells

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[addywells]

For the carets, when I enter the code into the custom CSS, it says invalid property value: content. The window preview finder shoes the caret but then it won’t save. Does this need to be inserted somewhere else?

[tim_tairli]

Yes, you can’t paste it into “Custom CSS” as it does not like the content: property at all.

If you follow my solution, then paste it with other code into “Custom Liquid” section.

The caret CSS can go right above the </style> line in that code.

Here is the complete code for `Custom liquid` with caret code included:

<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:-100px;
  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; */
  max-height: var(--header-height);
}

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

/* carets addition */
.menu-list__link:is(button, [aria-haspopup]) .menu-list__link-title:after {
  transform: scaleY(0.5);
  display: inline-block;
  margin-left: 5px;
  content: "\22C1";
  font-size: 0.8em;
  transition: transform linear 0.1s;
}

.menu-list__list-item:hover  .menu-list__link-title:after {
  transform: scaleY(-0.5);
}

</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>

[addywells]

Amazing this worked beautifully! Thank you!!!