Hello,
So I saw only a few posts where other people were trying to do a multi column in their subheader dropdown. The code that worked and pasted at the bottom of component-list-menu.css:
@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-block;
}
}
When I try using that code, it doesnt fully work for me, instead I get a large space where it looks like a 2nd column would fit but instead the items are not split into columns? Does anyone know how to fix this issue for me? Please thank you.
The results I get:
Hi @synth_lj ,
Please send your site and if your site is password protected, please send me the password. I will check it.
Hi @synth_lj ,
Please add code:
.header__inline-menu .list-menu.list-menu--inline {
position: relative;
}
.header__inline-menu #menuDrawer {
position: static !important;
}
.header__inline-menu .header__submenu.list-menu {
flex-wrap: wrap;
flex-direction: row;
gap: 0;
width: auto !important;
min-width: auto !important;
left: 0;
}
Hope it helps!
1 Like
Hello, so I tried this solution and it worked but I noticed for some reason it broke some code - I am now unable to click my other headers “About us” & “Contact Us” Are you able to help me fix this please?
Hi @synth_lj ,
Please add code:
#menuDrawer::before {
display: none;
}
1 Like
@LitExtension Hello, I am trying to have multiple columns in a dropdown menu for collections. These collections in the dropdown menu would also have dropdowns themselves. This is for 50 states that dropdown to be able to select the cities within. When I tried to use the code above, the cities are blurring together and going off the dropdown screen as shown in the highlight section of attached screenshot.
Hi @804design ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
