How to make a multi-column drop down menu for one section in Dawn theme?

[joedogfish]

Hi there,

I'm trying to refine this snippet of code that's at the component-list-menu.css from another thread. The coding works great however I only need 1 section of my nav bar 'BRANDS' to be a multi-column drop down and the rest to be as normal.

Preview link is https://xi2c77tf8ip94lhr-36045684869.shopifypreview.com

Coding used is :

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

Screenshot below is example of the only multi-column drop down I need in the nav baronly multi-column drop down needed

Thanks!

[SheetalZadfiya · Accepted solution]

Hi @joedogfish 

I understood your concern and realised that you achieve it using the below code. Those CSS applied all sub menus except the brand's sub menu. I believe this can help you to resolve the issue.

Please add below code:

@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;
	}
	.header__submenu:not(ul#HeaderMenu-MenuList-4) {
        width: 20rem !important;
    }
    .header__submenu li:not(ul#HeaderMenu-MenuList-4 li) {
        width: 100% !important;
    }
}

Happy Coding!!

[joedogfish]

Thank you so much!! liked and accepted as solution!

[MattBailey]

Where do I add the above code to make my brand menu multi-column? Below is an example of what I am aiming to do. Thank you