I need help with the 2 steps drop-down menu on my website. I have created a nested menu to show under one of the top-level menus I have on my website but the rest of the top menu move down and shows with the nested menu which is rather messy. I am using the Dawn theme. I have attached a picture for a better explanation of the problem I am facing and I have included my URL.
1 Like
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
Hi @Folake1 ,
With a 2 level menu, I recommend displaying it like this:
Go to Assets > base.css and paste this at the bottom of the file:
#HeaderMenu-MenuList-6 {
width: auto !important;
min-width: 200px;
}
#HeaderMenu-MenuList-6 li {
width: 100% !important;
display: block !important;
}
#HeaderMenu-MenuList-6 li details {
position: relative;
}
#HeaderMenu-MenuList-6 li details .header__submenu {
width: auto !important;
position: absolute;
left: 100%;
top: 0;
background-color: rgb(var(--color-background));
min-width: 200px;
}
Hope it helps!
Hey there @LitCommerce ! I was wondering if you would be able to help me out with my dawn theme nav as well? The one you’ve suggested here is exactly what I’m looking to do and I’m pretty much there with one issue..
My submenu isn’t positioning correctly. I know I need to add “position: relative” in somewhere, but no matter where I put it, nothing works.
Thanks so much in advance!
Site: https://the-witchs-apothecary.myshopify.com/
PW: witchy
@LitCommerce Sorry, nevermind!! I finally managed to fix it myself
1 Like