Shopify themes, liquid, logos, and UX
Please help me divide the menu into 2-3-4 columns. What would the menu be in width and not in length. Thanks !
n1outlet.com
Solved! Go to the solution
This is an accepted solution.
Hi @ValentynGorovoy
Please go to your Themes > Edit code > Assets > Open component-list-menu.css and paste this at the bottom of the file.
@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;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!
This is an accepted solution.
Hi @ValentynGorovoy
Please go to your Themes > Edit code > Assets > Open component-list-menu.css and paste this at the bottom of the file.
@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;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!
Hi @AvadaCommerce I've just added this into my shop but the subheadings are overlapping have you some code to undo this (shop is www.blueskyscreation.com )
Thank you
Try this instead. It worked for me 🙂
@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;
}
}
Worked for me too in Refresh v14, thank you.
I've tried this on my site running Dawn 6.0.2 and it's not working.
https://keith-jack-wholesale.myshopify.com/
Any help is greatly appreciated!
Hey Matt, I am having the same issue but I visited your site and it looks like you solved it. Could you reply with the code by any chance?
Hi Tim,
Any luck solving this issue? I am not having much luck with any of the suggested code changes. Thank you in advance.
Same here
Tried all the suggested code and can't get it to work.
This worked great for me. However I have a question, as someone else in this discussion posted a similar strain of code with a slight difference: the "block" was changed to "table". What would be the difference? I tried both and didn't notice any real difference.
This is exactly what i have been searching for, thanks for this great solution!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024