Make Shop All go onto the same column in mega menu

[kirsten11123]

 

hello,

I'd like the 'Shop All' to stack underneath the 'Shop Bundles' (Where green box is).

How do I do this? I want it to show as a top level menu.

https://om0k15yr0usgn1bz-86278439194.shopifypreview.com

[Guleria]

Hello @kirsten11123 ,

The clean solution for it will be edit theme liquid code and apply the logic.

btw for now you can try this solution  edit theme.liquid search for </body> now here just before to it add this code

<script>
document.querySelectorAll('.mega-menu__list').forEach(function(list) {
  const items = list.querySelectorAll('.mega-menu__item');
  const count = items.length;

  if (count >= 2) {
    const wrapper = document.createElement('div');
    wrapper.className = 'custom-wrapper-new';

    const lastItem1 = items[count - 2];
    const lastItem2 = items[count - 1];

    // Insert wrapper before the first of the last two items
    list.insertBefore(wrapper, lastItem1);

    // Move the two items into the wrapper
    wrapper.appendChild(lastItem1);
    wrapper.appendChild(lastItem2);
  }
});

</script>

Regards
Guleria

[tim]

This is a hackish solution, but it will work for now (and does not require code edits!) -- add the following code to this sections "Custom CSS":

.mega-menu__item:last-child {
  grid-column: 3;
  margin-top: -12rem;
}