Multi-Column Drop Down Menu ( Dawn template theme )

[ValentynGorovoy]

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

[AvadaCommerce · 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!

[blueskycreation]

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

[PeregrinePrints]

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;
	}
}

[saurav_sriv]

Worked for me too in Refresh v14, thank you.

[MattB82]

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!

[TimKell]

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?

[ZOzel]

Hi Tim,

Any luck solving this issue? I am not having much luck with any of the suggested code changes. Thank you in advance.

[didilean]

Same here

Tried all the suggested code and can't get it to work.

[Teranis]

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.

[newearthseeds]

This is exactly what i have been searching for, thanks for this great solution!