How can I customize drop down menus to sit side by side?

[armussett]

Hey!

Currently my dropdown menus automatically list collections below each other.

I would like to customise them so some sit side by side. Please see image example.

Thank you!

[GemPages]

Hello @armussett

You can follow this article in Shopify to create side by side menu https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus

If it doesn’t work, you can send me your store url so I can check it for you

Kind & Best regards,
GemPages

[armussett]

Thank you!

I was able to nest two columns - but now the first one is no longer aligned with ‘shop’. Is this an issue with the theme?

[MandasaTech]

Hello @armussett
Please share your store URL.

[GemPages]

Hello @armussett

I think so too, maybe it’s the design from the theme

Kind & Best regards,
GemPages

[armussett]

https://byfreer.com/

[MandasaTech]

@armussett

Add this CSS below of Online store >> Edit code >> Assets >> theme.css file

.menu__item.grandparent {
position: relative !important;
}

.grandparent .header__dropdown {
width: 100% !important;
max-width: 300px !important;
min-width: 400px !important;
left: -135px !important;
}

[MandasaTech]

@armussett

If our solution helps you then please mark it as accepted solution.

[armussett]

Looking a lot better but not yet fully aligned!

I was able to change it by changing the number in this paragraph

left: -135px !important;

to left: -18px !important;

Thanks a lot for your help.

[armussett]

Hi! Can you remind me where I need to paste this in the code body in order for it to work?