Hi there,
I was able to change some of my dropdown menu items in the navigation bar displaying 3 columns by the code in the accepted solution in the following post:
https://community.shopify.com/c/shopify-design/dawn-theme-multi-column-drop-down-menu/td-p/1618184
And I modify it a bit so that beside the 2nd - 5th items, others are displaying 1 column only:
@media only screen and (min-width: 750px){
.header__submenu.list-menu{
width: 60rem !important;
}
.header__submenu.list-menu li {
width: calc(100%/3);
display: inline-table;
}
.header__submenu:not(ul#HeaderMenu-MenuList-4):not(ul#HeaderMenu-MenuList-2):not(ul#HeaderMenu-MenuList-3):not(ul#HeaderMenu-MenuList-5) {
width: 20rem !important;
}
.header__submenu li:not(ul#HeaderMenu-MenuList-4 li):not(ul#HeaderMenu-MenuList-2 li):not(ul#HeaderMenu-MenuList-3 li):not(ul#HeaderMenu-MenuList-5 li) {
width: 100% !important;
}
}
However, by using the above code, the sub-menus are squeezed as well.
If the code made all the dropdown menus into 3 columns by the following:
@media only screen and (min-width: 750px){
.header__submenu.list-menu{
width: 60rem !important;
}
.header__submenu.list-menu li {
width: calc(100%/3);
display: inline-table;
}
}
Then the sub-menus can be shown as the way I want.
How can I make only the 2nd - 5th menus to display 3 columns, while the sub-menus in these menus also display in 3 columns? Thank you.