Click on the menu and the submenu will show on the right side ( Dawn Theme )

[dreamtechzone_5]

Hello everyone!
I am using the Shopify dawn theme. When I click on Fruits, the submenu will show on the right. Also, I want to add hover instead of click, like the image below. Is it possible? Please help me. Thank you in advance.

Store: https://delicious-fruits-vegetables.myshopify.com/
Password: Admin

[KetanKumar]

@dreamtechzone_5 
Sorry you are facing this issue,
It would be my pleasure to help you.
its possible to make more customization in header section modification to current code and add new one take long time to this customization 

[dreamtechzone_5]

It would be very helpful if you could give me the code and instructions on how I can do this. Thank you very much.

[KetanKumar]

@dreamtechzone_5  yes sure if you re able to code you have try and modification your header code https://codepen.io/syahrizaldev/pen/WNmMmbK 

[dreamtechzone_5]

Thank you so much.

It would be good for me if you could give me instructions on where to put the code.

[KetanKumar]

@dreamtechzone_5 great 

if you have able to Shopify liquid code modification you have try example link sorry but instructions its difficulty to step by step your work before any code change in Shopify? so you can easy change otherwise please don't any code change 

[dreamtechzone_5]

I used this code but when I click on the second menu after closing the first menu, the first menu shows.

details[open] .header__submenu.list-menu:not(.list-menu--disclosure){
position: absolute;
background: #fff;
box-shadow: 8px 4px 15px rgba(0, 0, 0, 0.08);
top: -1px;
left: 20rem;
width: 20rem;
}
.header__submenu.list-menu--disclosure .icon-caret{
transform: rotate(-90deg);
}
details[open] > .header__menu-item .icon-caret {
transform: rotate(-90deg) !important;;
}

[KetanKumar]

@dreamtechzone_5 can you please 1st enable your mega menu in header section on theme customization 

[dreamtechzone_5]

I have enabled the mega menu. Should I remove the code?

[KetanKumar]

@dreamtechzone_5 yes please by default Shopify allow mega menu 

https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus 

[dreamtechzone_5]

I have created MegaMenu.

[dreamtechzone_5]

I want the submenu to show on the right when I click on Fruits.

[KetanKumar]

@dreamtechzone_5 can you please share your example store url so i will check and update you.

[dreamtechzone_5]

MTB / E-BIKE COMPONENTS Click on this menu.
Click on SPROCKET PACK and the submenu is showing on the right. I want to keep my menu exactly like this.

https://bikeadviceitalia.shop/en

[KetanKumar]

@dreamtechzone_5 i can see this view 

do you want like that?

[dreamtechzone_5]

Yes, Sir. I want to keep my menu exactly like this.

[KetanKumar]

@dreamtechzone_5 ok disable your mega menu simple dropdown with sub menu option select on theme setting and let me know 

[dreamtechzone_5]

Done sir

[dreamtechzone_5]

Sir, are you there? I need your help. Please help me. Thank you.

[KetanKumar · Accepted solution]

@dreamtechzone_5 yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.header__submenu .header__submenu {
    position: absolute;
    right: -231px;
    background: #fff;
    top: 0;
    width: 230px;
}

[dreamtechzone_5]

Sir it worked. I used this code but when I click on the second menu after closing the first menu, the first menu shows. Please check. thank you very much.

[KetanKumar]

@dreamtechzone_5 can you please share video further issue

[dreamtechzone_5]

The collections of SEASONAL BOXES are marked in red. When I click on the blue marked collection and then click on SEASONAL BOXES, the collections of SALADS & HERBS also show on the right. I want 1st menu not to show if 2nd menu is clicked after 1st menu clicked.

[KetanKumar]

@dreamtechzone_5 got it on click menu doesn't close give me some time i will review code and update you

[dreamtechzone_5]

Thank you. Sir Can you give me the code now?

[KetanKumar]

@dreamtechzone_5 oh sorry its not simple 5-6 line code it can be done more customization code take long time 

[dreamtechzone_5]

Oh, How long will it take?

[KetanKumar]

@dreamtechzone_5 if current code work approx. 2-3 hours but if doesn't work create new one approx. 5-6 hours 

[dreamtechzone_5]

Oh😪😪

[KetanKumar]

@dreamtechzone_5 sorry but its necessary customization code as per your recruitment 

[dreamtechzone_5]

Ok, Thank you.

[KetanKumar]

@dreamtechzone_5 thanks for your update and support