How can I make drop-down menu links collapse on the right side?

Store Design
, , ,
1

Hello everyone,
I want my drop-down menu links to collapse on the right side instead of beneath the menu header. I have tried multiple designs, but none seem to do what I am looking for. I am using Dawn 2.0. For more information on what I exactly want, please see the picture attached.

Schermafbeelding 2023-10-22 104822.png
Schermafbeelding 2023-10-22 104822.png598×159 16.1 KB

2

Hi @off-market_1 ,

Please try the following way:

  1. Go to Themes > Customize > Edit code: https://prnt.sc/tqb8deSSIKyV

  2. Find base.css file: https://prnt.sc/ep8aDuAZ9csQ

  3. Add the following code at the end of the file:

details[open] > .header__menu-item .icon-caret {
transform: rotate(270deg);
}
details[open] > .header__submenu {
top: 0;
left: 100%
}

  1. Save and test

Hope it helps @off-market_1

3

Thank you, that worked like a charm!

4

Hello - Thank you for this. I tried this and it did what it was intended, but I’m trying to make my submenu of the submenu go to the right instead of overlapping over my submenu I tried to look for it in css. I thought it might be sub_menu.list-view or something..