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!
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024