Horizon theme: drop-down menu alignment

[jeffreykubiak]

Hi,

I’d like to align drop-down menu items with their parent item (i.e. appear diretly below it) and the background box should be just the size of the drop-down items (not the entire width of the page).

I’ve already searched this and tried out various different CSS suggestions from previous threads as well as both Shopify and Google AI but none seem to be working properly.

One suggestion got me almost there but the sub-menu items were then spelled vertically"!! (i.e. one letter per row).

Does anyone have a definitive solution? I don’t really understand why it’s like this in the theme in the first place, make no sense to have the drop downs so far out of alignment…

Many thanks,

Jeffrey

[tim_tairli]

It’s not a drop-down menu, it’s megamenu. The chioce made by theme designers.
This may be relevant – Centering Drop Down Menus in Horizon Theme - #2 by tim_1

And the post by sadmonkey there with code which suited their needs Centering Drop Down Menus in Horizon Theme - #4 by sadmonkey

[jeffreykubiak]

Thank you for the reply!

I copied the CSS into my base CSS, saved but nothing changed….

[jeffreykubiak]

Thank you for your reply! I’m not a programmer/developer. I simply copy the CSS text from the various threads I’ve been reading or from AI generated CSS.

I do not really understand what is doing what, unless someone explains things line by line I had been successful in customising some simple CSS additions when I was able to identify which syntax exactly I needed to change to make the add-on work, but with code over dozens of lines I’m a bit lost.

[Mabinibooks]

Please share your store link and I’ll try to fix it for you, if it’s not live yet, please share or remove the password

[jeffreykubiak]

Thanks all for trying to help!

My shop is not live yet (I’m still operating on another platform presently), but I aim to switch in a week or so. Sharing a password openly sounds kind of wrong though??

[Mabinibooks]

I understand the concern regarding sharing the website password if it’s not live yet, however, we wont be able to see and modify the backend, we would only see the front-end website design

[jeffreykubiak]

Hi, yes I understand. Many thanks.

The thing is though, HOW exactly do I fix it? I’ve tried about 5 or 6 different CSS additions I’ve found and either they didn’t work at all (I guess because they were not meant for a mega-menu type?) or I got the weird vertically stacked spelling…

[tim_tairli]

I’ve tried to create something suitable.
Did some minimal testing, but there are too many possibilities.

Should work fine with simpler menus, believe if someone has big menu, they would be better off keeping mega-menu.

It’s a hybrid solution – if you only have 2 levels, it will look like usual dropdowns, but for 3 levels it will become hybrid – showing 2 and 3 levels as mega-submenu.

Can be done as CSS-only.
The code is too much to go into section Custom CSS, but can be used on Theme settings-> Custom CSS.

CSS only version

li.menu-list__list-item {
  position: relative;
}

.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 {
  display: none;
}

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

However, CSS-only solution can end up like this – going beyond right window boundary:

For this I’ve added a small JS code, which looks at the dropdowns and if they do not fit, it aligns them not at the left of the parent top-level item, but at the right:

This would require adding a “Custom liquid” section to the Footer Group.

Here is the code to paste

CSS part is the same, just wrapped with <style> and </style>:

<style>
li.menu-list__list-item {
  position: relative;
}

.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 {
  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>

And here is the preview link to the code added in my test store

[jeffreykubiak]

Thank you very much indeed!!! It worked!!! I only have two items in my drop-down currently (may become 3 or 4 in the future but not that many more) and no sub-level drop downs. The first CSS group was therefore enough.

Thank you again, that’s amazing.

[triumph]

The thing is, that vertical text you saw happens when the submenu is forced to shrink but the theme still allows wrapping, so it stacks letters instead of keeping words together. it’s simply fixing the code for the text but not for the theme.
I can give you a look of how it looks like in the code, but pasting that may violate shopify’s community policy

[jeffreykubiak]

Thank you, but the code Tim_1 posted above works for me so I think I’m good now.

[imagemanagement]

I had a similar need on my site - no mega menus but wanted a standard dropdown setting for the menu. This toggles in the online editor between mega menu format or dropdown format.

Blocks > _header-menu.liquid

{%- doc -%}

  Renders a header menu block.




@param {string} [variant] - What version of the menu to render. Defaults to header menu.

@param {string} [transparent] - Show a transparent menu

{%- enddoc -%}




{% liquid

assign block_settings = block.settings

assign animation_speed = 200

%}




{% case variant %}

{% when 'mobile' %}

<div

class="header__drawer desktop:hidden"

ref="headerDrawerContainer"

{{ block.shopify_attributes }}

>

{% render 'header-drawer',

class: 'header__drawer--mobile',

linklist: block_settings.menu,

data_header_drawer_type: 'mobile-drawer'

%}

</div>




{% when 'navigation_bar' %}

{% if block_settings.navigation_bar == true %}

<div

class="menu-list menu-list--mobile{% if transparent == blank %} color-{{ block_settings.color_scheme_navigation_bar }}{% endif %}"

style="--menu-horizontal-gap: 15px; --mobile-nav-margin: auto;"

>

<div class="menu-list__scroll-container">

<ul

class="menu-list__list list-unstyled"

role="list"

>

{% for link in block_settings.menu.links %}

<li>

<a

href="{{ link.url }}"

id="MenuItem-{{ link.handle }}"

class="menu-list__item"

{% if link.current %}

aria-current="page"

{% endif %}

>

{{- link.title -}}

</a>

</li>

{% endfor %}

</ul>

</div>

</div>

{% endif %}

{% else %}

{% liquid

assign block_settings = block.settings

assign menu_content_type = block_settings.menu_style | default: 'text'

assign image_border_radius = block_settings.image_border_radius

assign color_scheme_classes = ''

assign color_scheme_setting_id = 'color_scheme_' | append: section.settings.menu_row

assign current_color_scheme = block_settings.color_scheme

assign parent_color_scheme = section.settings[color_scheme_setting_id]

assign submenu_type = block_settings.submenu_type | default: 'megamenu'




if parent_color_scheme.id != current_color_scheme.id

assign color_scheme_classes = ' color-' | append: current_color_scheme

endif




      # Check if header and menu colors match. This is used to apply different padding styles in css

if parent_color_scheme.settings.background.rgb == current_color_scheme.settings.background.rgb

assign color_scheme_classes = color_scheme_classes | append: ' color-scheme-matches-parent'

endif




if block_settings.menu_style == 'featured_collections'

assign ratio = block_settings.featured_collections_aspect_ratio

elsif block_settings.menu_style == 'featured_products'

assign ratio = block_settings.featured_products_aspect_ratio

endif

%}




{% capture children %}

{% for link in block_settings.menu.links %}

<li

role="presentation"

class="menu-list__list-item"

on:focus="/activate"

on:blur="/deactivate"

on:pointerenter="/activate"

on:pointerleave="/deactivate"

>

<a

href="{{ link.url }}"

data-skip-node-update="true"

class="menu-list__link{% if link.active %} menu-list__link--active{% endif %}"

{%- if link.links != blank -%}

aria-controls="submenu-{{ forloop.index }}"

aria-haspopup="true"

aria-expanded="false"

{%- endif -%}

ref="menuitem"

>

<span class="menu-list__link-title">{{- link.title -}}</span>

</a>

{%- if link.links != blank -%}

<div class="menu-list__submenu{{ color_scheme_classes }}{% if submenu_type == 'dropdown' %} menu-list__submenu--dropdown{% endif %}" ref="submenu[]">

<div

id="submenu-{{ forloop.index }}"

class="menu-list__submenu-inner{% if submenu_type == 'dropdown' %} menu-list__submenu-inner--dropdown{% endif %}"

style="{% render 'submenu-font-styles', settings: block_settings %}"

>

{% if submenu_type == 'dropdown' %}

<div class="dropdown-menu" role="presentation">

<ul class="dropdown-menu__list list-unstyled" role="list">

{% for child in link.links %}

<li class="dropdown-menu__item">

<a href="{{ child.url }}" class="dropdown-menu__link">

<span class="dropdown-menu__link-title wrap-text">{{- child.title -}}</span>

</a>

</li>

{% endfor %}

</ul>

</div>

{% else %}

{% assign list_id = 'MegaMenuList-' | append: forloop.index %}

<div class="mega-menu section section--full-width-margin section--{{ section.settings.section_width }}">

<div

class="mega-menu__grid"

data-menu-grid-id="{{ list_id }}"

>

{% render 'mega-menu-list',

parent_link: link,

id: list_id,

section: section,

grid_columns_count: 6,

grid_columns_count_tablet: 4,

grid_columns_count_collection_images: 8,

menu_content_type: menu_content_type,

content_aspect_ratio: ratio,

image_border_radius: image_border_radius

%}

</div>

</div>

{% endif %}

</div>

</div>

{%- endif -%}

</li>

{% endfor %}

<li

class="menu-list__list-item"

role="presentation"

slot="more"

on:focus="/activate"

on:blur="/deactivate"

on:pointerenter="/activate"

on:pointerleave="/deactivate"

>

<button role="menuitem" class="button menu-list__link button-unstyled">

<span class="menu-list__link-title">{{ 'actions.more' | t }}</span>

</button>

</li>

{% endcapture %}




<header-menu

ref="headerMenu"

class="header-menu mobile:hidden"

data-animation-delay="{{ animation_speed }}"

{{ block.shopify_attributes }}

style="--submenu-animation-speed: {{ animation_speed }}ms;"

>

<div class="header-menu__inner">

<nav header-menu>

<div

class="menu-list"

style="{% render 'menu-font-styles', settings: block_settings %}"

>

{% liquid

assign class = 'overflow-menu' | append: color_scheme_classes

if submenu_type == 'dropdown'

assign class = class | append: ' overflow-menu--dropdown'

endif

%}

{% render 'overflow-list',

class: class,

ref: 'overflowMenu',

children: children,

minimum-items: 2,

data-testid: 'header-menu-overflow-list',

attributes: 'data-skip-node-update'

%}

</div>

</nav>

</div>




<script

src="{{ 'header-menu.js' | asset_url }}"

type="module"

fetchpriority="low"

></script>

</header-menu>

{% endcase %}




{% stylesheet %}

.menu-list--mobile {

    &.menu-list {

display: grid;

    }




    & .menu-list__list {

width: max-content;

margin-inline: auto;

gap: var(--menu-horizontal-gap);

    }




    & li {

width: max-content;

padding-block: var(--padding-sm);

    }




    & li:first-of-type {

padding-inline-start: var(--menu-horizontal-gap);

    }




    & li:last-of-type {

padding-inline-end: var(--menu-horizontal-gap);

    }




    & a {

color: var(--color-foreground);

    }

  }




.menu-list__scroll-container {

position: relative;

overflow-x: auto;

mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);

padding-block: var(--padding-2xs);

  }




header-menu {

width: 100%;

  }




/* Drawer menu featured content */

.menu-drawer__featured-content {

z-index: var(--layer-base);

container-type: inline-size;

  }




.menu-drawer__featured-content--childlist {

z-index: var(--layer-flat);

  }




.menu-drawer__featured-content-list {

display: flex;

gap: 1em;

overflow-x: auto;

padding-block-end: var(--padding-lg);

  }




.menu-drawer__featured-content-list-item {

flex: 0 0 auto;

  }




.menu-drawer__featured-content-list-item--product {

width: 35cqi;

  }




.menu-drawer__featured-content-list-item--collection img.resource-card__image {

width: 80cqi;

  }




.menu-drawer__featured-content-list-item:first-child {

margin-inline-start: var(--margin-xl);

  }




.menu-drawer__featured-content-list-item:last-child {

margin-inline-end: var(--margin-xl);

  }




.menu-list {

--menu-horizontal-gap: var(--gap-xl);

--menu-vertical-gap: var(--gap-xl);




display: flex;

  }




.menu-list__list {

display: flex;

justify-content: var(--grid-area-alignment);

  }




.menu-list__list-item {

flex-shrink: 0;

white-space: nowrap;

  }




.menu-list__list-item[aria-hidden='true'] {

visibility: hidden;

  }




.menu-list__link {

font-family: var(--menu-top-level-font-family);

font-style: var(--menu-top-level-font-style);

font-weight: var(--menu-top-level-font-weight);

font-size: var(--menu-top-level-font-size);

line-height: var(--menu-top-level-font-line-height);

text-transform: var(--menu-top-level-font-case);

color: var(--menu-top-level-font-color);

transition: color var(--animation-speed) var(--animation-easing);

text-decoration: none;

display: flex;

min-height: var(--minimum-touch-target);

align-items: center;




    &:hover,

    &:focus {

color: var(--menu-top-level-font-color);

    }




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

font-size: var(--menu-top-level-font-size-desktop);

    }

  }




/*

      High specificity selectors to subdue non-hovered links without javascript.

      If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.

    */

.menu-list:where(:has(.menu-list__list-item:hover)),

.menu-list:where(:has(.menu-list__list-item:focus-within)),

.menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {

    .menu-list__link {

color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));

    }

  }




/* stylelint-disable-next-line selector-max-specificity */

.menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,

.menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,

.menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {

color: var(--menu-top-level-font-color);

  }




.overflow-menu::part(list) {

/* Make sure focus outline is not cut off by overflow hidden */

--focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));




gap: 0 var(--menu-horizontal-gap);

  }




.overflow-menu {

background-color: transparent;

padding: var(--focus-outline-size);

margin: calc(-1 * var(--focus-outline-size));

  }




/* the submenu background element to animate */

.overflow-menu::after {

content: '';

position: absolute;

top: calc(100% - 1px + var(--border-bottom-width));

left: 0;

width: 100%;

height: var(--submenu-height);

background-color: var(--color-background);

box-shadow: var(--shadow-popover);

clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */

opacity: var(--submenu-opacity, 1);

transition: height var(--submenu-animation-speed) var(--ease-out-cubic),

      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);

z-index: calc(var(--layer-header-menu) - 1);

  }




/** mega menu **/

.menu-list__submenu,

.overflow-menu::part(overflow) {

--submenu-padding-block-start: var(--padding-3xl);

--submenu-padding-block-end: var(--padding-3xl);




background-color: transparent;

  }




.header__row[style*='--border-bottom-width: 0px'] {

    .menu-list__submenu.color-scheme-matches-parent,

    .overflow-menu.color-scheme-matches-parent::part(overflow) {

--submenu-padding-block-start: 0px;

    }

  }




.menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,

.overflow-menu::part(overflow) {

--submenu-content-opacity: 0;

--submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);




visibility: hidden;

background-color: var(--color-background);

position: absolute;

width: 100%;

left: 0;

top: calc(100% - 1px + var(--border-bottom-width));

z-index: var(--layer-header-menu);

padding-inline: var(--padding-inline);

clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */

transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);

  }




/* Show the submenus on hover */

.menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,

/* Show the overflow menu when a menu item is hovered */

.overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow),

/* Keep the submenus open when they are hovered */

.menu-list__submenu:is(:hover),

.overflow-menu::part(overflow):hover {

--submenu-content-opacity: 1;




visibility: visible;

  }




.menu-list__list-item:has([data-animating]) > .menu-list__submenu {

--submenu-content-opacity: 0;




visibility: visible;




    &::before {

      height: 0;

    }

  }




.menu-list__submenu-inner,

.overflow-menu::part(overflow-list) {

grid-column: 2;

padding-block-start: var(--submenu-padding-block-start);

padding-block-end: var(--submenu-padding-block-end);

padding-inline: var(--section-padding-inline);

  }




.overflow-menu::part(overflow) {

--menu-top-level-font-size: var(--font-size--xlarge);




display: grid;

grid-template-columns: var(--full-page-grid-with-margins);

  }




.overflow-menu::part(overflow-list) {

--submenu-content-opacity: 0;




position: relative;

display: grid;

grid-template-columns: minmax(auto, 200px) 1fr;

grid-template-areas: 'left right';

grid-template-rows: max-content;

grid-gap: 0;

  }




/* Make overflow menu scrollable when content exceeds viewport */

.menu-list__submenu-inner,

.overflow-menu::part(overflow-list) {

max-height: calc(80vh - var(--header-height));

overflow-y: auto;

overflow-x: hidden;

scrollbar-width: thin;

scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;

  }




.menu-list__list-item:is([slot='overflow']) {

--menu-top-level-font-color: var(--color-foreground);

--menu-top-level-font-color-rgb: var(--color-foreground-rgb);




display: contents;

white-space: normal;




    .menu-list__link {

--submenu-content-opacity: 0;




grid-area: left;

grid-row: auto;

height: min-content;

font-size: var(--font-size--xl);

opacity: var(--submenu-content-opacity);

transition: var(--submenu-content-animation);

    }




.menu-list__submenu {

visibility: hidden;

grid-row: 1;

grid-area: right;

grid-row-end: span calc(var(--overflow-count) + 1);

padding-inline-start: var(--menu-horizontal-gap);




      .menu-list__submenu-inner {

padding-block-start: 0;

grid-column: unset;

      }

    }




.menu-list__link[aria-expanded='true'] + .menu-list__submenu {

visibility: visible;

    }

  }




.header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {

--submenu-content-opacity: 1;

  }




.menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {

--submenu-content-opacity: 0;

  }




.menu-list__submenu-inner {

position: relative;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

opacity: var(--submenu-content-opacity);

transition: var(--submenu-content-animation);

  }




.mega-menu__link {

font-family: var(--menu-child-font-family);

font-style: var(--menu-child-font-style);

font-weight: var(--menu-child-font-weight);

font-size: var(--menu-child-font-size);

line-height: var(--menu-child-font-line-height);

text-transform: var(--menu-child-font-case);

color: var(--menu-child-font-color);

white-space: normal;

text-decoration: none;

display: inline-flex;

padding: var(--padding-2xs) 0;

transition: color var(--animation-speed) var(--animation-easing);




    &:hover {

color: var(--menu-child-active-font-color);

    }

  }




.mega-menu__link--parent {

font-family: var(--menu-parent-font-family);

font-style: var(--menu-parent-font-style);

font-weight: var(--menu-parent-font-weight);

font-size: var(--menu-parent-font-size);

line-height: var(--menu-parent-font-line-height);

text-transform: var(--menu-parent-font-case);

color: var(--menu-parent-font-color);




    &:hover {

color: var(--menu-parent-active-font-color);

    }

  }




@media screen and (max-width: 989px) {

.mega-menu__content-list-item--hidden-tablet {

display: none;

    }

  }




.mega-menu__link:has(.mega-menu__link-image) {

display: flex;

flex-direction: column;

padding-inline: 0;

padding-block: var(--padding-sm) 0;

  }




.mega-menu__link-image {

width: 100%;

position: relative;

aspect-ratio: 16 / 9;

margin-bottom: var(--padding-sm);

object-fit: cover;

border-radius: var(--menu-image-border-radius);

  }




/* Fix alignment for collection image mode links without images */




/* Target only top-level links (direct children of column > div) in collection image mode */

.mega-menu__grid:has(.mega-menu__link-image)

.mega-menu__column

    > div

    > .mega-menu__link:not(:has(.mega-menu__link-image)) {

display: flex;

flex-direction: column;

padding-inline: 0;

padding-block: var(--padding-sm) 0;

  }




.mega-menu__grid:has(.mega-menu__link-image)

.mega-menu__column

    > div

    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {

content: '';

display: block;

width: 100%;

aspect-ratio: 16 / 9;

margin-bottom: var(--padding-sm);

background-color: var(--color-foreground-muted);

opacity: 0.1;

border-radius: var(--menu-image-border-radius);

  }




.mega-menu__grid {

display: grid;

grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));

gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

width: 100%;




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

grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));

    }

  }




.mega-menu__column {

grid-column: span 1;

  }




.mega-menu__column--span-2 {

grid-column: span 2;

  }




.mega-menu__column--span-3 {

grid-column: span 3;

  }




.mega-menu__column--span-4 {

grid-column: span 4;

  }




.mega-menu__column--wide-collection-image {

grid-column: span 1;




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

grid-column: span 2;

    }

  }




.mega-menu__submenu .mega-menu__column--wide-collection-image {

grid-column: span 1;

  }




.mega-menu__content-list {

display: grid;

justify-content: end;

gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

  }




.mega-menu__content-list--products {

grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));




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

grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));

    }

  }




.mega-menu__content-list--collections {

grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));




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

grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));

    }

  }




.mega-menu__list {

display: grid;

grid-template-columns: subgrid;

grid-column: span var(--menu-columns-tablet);

gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);




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

grid-column: span var(--menu-columns-desktop);

    }

  }




.mega-menu__content {

grid-column: span var(--menu-content-columns-tablet) / -1;




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

grid-column: span var(--menu-content-columns-desktop) / -1;

    }

  }




.menu-list__list-item[slot='overflow'] .section {

grid-template-columns: 1fr;

  }




.menu-list__list-item[slot='overflow'] .section .mega-menu__grid {

grid-column: 1;

  }




.mega-menu__content-list li {

white-space: normal;

  }




/* mega more menu */

.mega-menu__more-list {

--menu-child-font-size: var(--font-size--xl);




width: 200px;

  }




.mega-menu__more-list-item .mega-menu__link {

color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));

  }




.mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {

color: var(--menu-top-level-font-color);

  }




.mega-menu__more-list-item[aria-hidden='true'] {

display: none;

  }




.mega-menu__submenu {

/* preserves the inherited grid layout when this submenu wrapper is used */

display: contents;

  }




/* ---------------------------

     Dropdown mode: kill full-width bg + constrain submenu width

  --------------------------- */

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

/* This is the full-width background slab the theme draws */

.overflow-menu--dropdown::after {

display: none !important;

    }




/* Make submenu positioning relative to each top-level <li> */

.overflow-menu--dropdown .menu-list__list-item {

position: relative;

    }




/* Override base theme full-width submenu wrapper behavior */

.overflow-menu--dropdown .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu--dropdown {

width: max-content !important;

left: -10px !important;

right: auto !important;

top: calc(100% - 1px + var(--border-bottom-width)) !important;

padding-inline: 0 !important;

clip-path: none !important;

    }




/* Undo grid/padding meant for mega menus */

.overflow-menu--dropdown .menu-list__submenu-inner--dropdown {

grid-column: unset !important;

padding-inline: 0 !important;

padding-block-start: var(--padding-lg) !important;

padding-block-end: var(--padding-lg) !important;

max-height: calc(80vh - var(--header-height));

overflow: auto;

    }




/* Give dropdown a panel look (narrow bg, not full width) */

.overflow-menu--dropdown .dropdown-menu {

background: var(--color-background);

box-shadow: var(--shadow-popover);

border-radius: var(--border-radius-lg, 8px);

padding-inline: var(--padding-lg);

width: 100%;

    }




.overflow-menu--dropdown .dropdown-menu__list {

display: grid;

gap: 0;

margin: 0;

padding: 0;

    }




.overflow-menu--dropdown .dropdown-menu__link {

font-family: var(--menu-child-font-family);

font-style: var(--menu-child-font-style);

font-weight: var(--menu-child-font-weight);

font-size: var(--menu-child-font-size);

line-height: var(--menu-child-font-line-height);

text-transform: var(--menu-child-font-case);

color: var(--menu-child-font-color);

text-decoration: none;

display: flex;

padding: 3px 0;

white-space: nowrap;

    }




.overflow-menu--dropdown .dropdown-menu__link:hover {

color: var(--menu-child-active-font-color);

    }




  }

{% endstylesheet %}




{% schema %}

{

"name": "t:names.menu",

"tag": null,

"settings": [

    {

"type": "link_list",

"id": "menu",

"label": "t:settings.menu",

"default": "main-menu"

    },

    {

"type": "select",

"id": "submenu_type",

"label": "Menu type",

"options": [

        { "value": "megamenu", "label": "Megamenu" },

        { "value": "dropdown", "label": "Drop down" }

      ],

"default": "megamenu"

    },

    {

"type": "color_scheme",

"id": "color_scheme",

"label": "t:settings.color_scheme",

"default": "primary"

    },

    {

"type": "header",

"content": "t:content.typography"

    },

    {

"type": "select",

"id": "type_font_primary_size",

"label": "t:settings.top_level_size",

"options": [

        { "value": "0.625rem", "label": "10px" },

        { "value": "0.75rem", "label": "12px" },

        { "value": "0.875rem", "label": "14px" },

        { "value": "1rem", "label": "16px" },

        { "value": "1.125rem", "label": "18px" }

      ],

"default": "1rem"

    },

    {

"type": "select",

"id": "menu_font_style",

"label": "t:settings.submenu_size",

"options": [

        { "value": "regular", "label": "t:options.small" },

        { "value": "inverse", "label": "t:options.medium" },

        { "value": "inverse_large", "label": "t:options.large" }

      ],

"default": "inverse"

    },

    {

"type": "select",

"id": "type_font_primary_link",

"label": "t:settings.font",

"options": [

        { "value": "body", "label": "t:options.body" },

        { "value": "subheading", "label": "t:options.subheading" },

        { "value": "heading", "label": "t:options.heading" },

        { "value": "accent", "label": "t:options.accent" }

      ],

"default": "heading"

    },

    {

"type": "select",

"id": "type_case_primary_link",

"label": "t:settings.text_case",

"options": [

        { "value": "none", "label": "t:options.default" },

        { "value": "uppercase", "label": "t:options.uppercase" }

      ],

"default": "none"

    },

    {

"type": "header",

"content": "t:content.submenu_feature"

    },

    {

"type": "select",

"id": "menu_style",

"label": "t:settings.media_type",

"info": "t:info.media_type_info",

"options": [

        { "value": "text", "label": "t:options.none" },

        { "value": "collection_images", "label": "t:options.collection_images" },

        { "value": "featured_products", "label": "t:options.featured_products" },

        { "value": "featured_collections", "label": "t:options.featured_collections" }

      ],

"default": "collection_images"

    },

    {

"type": "select",

"id": "featured_products_aspect_ratio",

"label": "t:settings.image_ratio",

"options": [

        { "value": "adapt", "label": "t:options.auto" },

        { "value": "4 / 5", "label": "t:options.portrait" },

        { "value": "1 / 1", "label": "t:options.square" }

      ],

"default": "4 / 5",

"visible_if": "{{ block.settings.menu_style == 'featured_products' }}"

    },

    {

"type": "select",

"id": "featured_collections_aspect_ratio",

"label": "t:settings.image_ratio",

"options": [

        { "value": "adapt", "label": "t:options.auto" },

        { "value": "16 / 9", "label": "t:options.landscape" },

        { "value": "1 / 1", "label": "t:options.square" }

      ],

"default": "16 / 9",

"visible_if": "{{ block.settings.menu_style == 'featured_collections' }}"

    },

    {

"type": "range",

"id": "image_border_radius",

"label": "t:settings.image_border_radius",

"min": 0,

"max": 32,

"step": 1,

"unit": "px",

"default": 0,

"visible_if": "{{ block.settings.menu_style != 'text' }}"

    },

    {

"type": "header",

"content": "t:content.mobile_layout"

    },

    {

"type": "checkbox",

"id": "navigation_bar",

"label": "t:settings.navigation_bar"

    },

    {

"type": "color_scheme",

"id": "color_scheme_navigation_bar",

"label": "t:settings.navigation_bar_color_scheme",

"default": "primary",

"visible_if": "{{ block.settings.navigation_bar }}"

    },

    {

"type": "checkbox",

"id": "drawer_accordion",

"label": "t:settings.accordion",

"default": false

    },

    {

"type": "checkbox",

"id": "drawer_accordion_expand_first",

"label": "t:settings.expand_first_group",

"default": false,

"visible_if": "{{ block.settings.drawer_accordion == true }}"

    },

    {

"type": "checkbox",

"id": "drawer_dividers",

"label": "t:settings.dividers",

"default": false

    }

  ]

}

{% endschema %}

[rogerdat]

Thank you! You are a rockstar! This worked instantly. One thing for non-coding newbs like me to know, this is a total replacement of the original Shopify code in Blocks > _header-menu.liquid , not just adding it to the bottom like some other fixes.

[tim_tairli]

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…

[AhoyCaptainEvie]

@tim_tairli - my apologies for hounding you, my friend. Thank you so much for your continued help!

I have done my best to follow your instructions. I copied the code between the lines and put it in Theme Settings → CSS Code. It seems to be back to making a full-screen wide menu with the submenus to the far left. Could I ask you to take a look please?

site: hocopirates.com

password: booty

[tim_tairli]

Shopify Custom CSS may be picky about the code you add.

I do not see any of the code suggested on your site.
Meaning you’re doing something seriously wrong, but I can’t tell from outside.

You may try adding the code in “Custom liquid” section, as suggested above, or in a stylesheet…

[SMM_2026]

Hi there, thanks for sharing this code! I came across this thread and I was wondering if you’d be able to help as I am looking to accomplish something similar. Instead of a vertical drop down menu, I’d like to keep this horizontal layout, but have the category names line up horizontally across the page, and therefore make the white dropdown less than half its current size, so it doesn’t block the photo. (Sorry about the red, I just blocked out identifying info)

[addywells]

The code works, except for it makes the header background transparent when scrolling. Is there a way to fix this?

I tried adding .header {
background-color: var(–color-background);
}

before

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

which works except when hovering over menu items that don’t have submenus/dropdowns, it makes flickering underneath the menu as if it’s trying to open a submenu/dropdown.

[tim_tairli]

Yes, this rule prevent the menu underlay from showing:

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

An option is to change it to:

.overflow-menu:after,
.header__underlay {
/*  display: none; */
  max-height: var(--header-height);
}

I’ve shared the full updated code at Horizon Submenu/dropdown alignment & carat - #7 by tim_tairli