Re: Multi-Column Drop Down Menu ( Dawn template theme )

Solved

Multi-Column Drop Down Menu ( Dawn template theme )

ValentynGorovoy
Tourist
4 0 5

Please help me divide the menu into 2-3-4 columns. What would the menu be in width and not in length. Thanks !

Screenshot_6.png
n1outlet.com

Accepted Solution (1)

AvadaCommerce
Shopify Partner
3879 839 985

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!




banned

View solution in original post

Replies 10 (10)

AvadaCommerce
Shopify Partner
3879 839 985

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!




banned
blueskycreation
Visitor
1 0 0

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
Visitor
1 0 2

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
Tourist
8 1 6

Worked for me too in Refresh v14, thank you.

MattB82
Tourist
4 0 1

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!

 

MattB82_0-1678308999966.png

 

 

 

TimKell
Shopify Partner
1 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

Same here

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

Teranis
Excursionist
11 0 1

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
Visitor
2 0 0

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