Change width of submenu to full width of page?

[NielsSchutte]

Hi,

I'm trying to create a menu like this:

What I've got now:

Is there a way to accomplish this without using an licensed application and just code it in html/css?

My requirements:

1. Sub-menu has to be full width(look first image)

2. I want to add headers with link-lists below
3. I like to add a image next to these link-lists

Hope someone can give me an answer.

Niels

[PageFly-Richard]

Provide me your store URL, I will give you an instruction

[NielsSchutte]

Hello,

URL is: smartsnutrition.myshopify.com or www.smartnutrition.nl

Password: plazay

Thanks for the effort!:)

Niels

[PageFly-Richard]

Use this custom CSS code

.site-nav>li.site-nav--has-dropdown {
	position: static;
}
.site-nav>li.site-nav--has-dropdown .site-nav--dropdown {
	top: initial;
	width: 1030px;
	left: calc(50% - 515px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.site-nav>li.site-nav--has-dropdown > a {
	font-weight: bold;
}
.site-nav>li.site-nav--has-dropdown .site-nav--dropdown-grandchild {
	position: relative;
	opacity: 1;
	left: 0;
	border: 0;	
}

[NielsSchutte]

Looks good but not exactly what I mean, with the code u written I've got the following:

What I'm trying to create is:

So I'm trying to put 2 sub-menu's below eachother and next to these submenus I want to display an image(banner of products). Is this possible

Thanks for the effort!

Niels

[PageFly-Richard]

If you have more than 4 sub-menu items, it will display exactly like your image

[NielsSchutte]

Isnt is possible with 2 sub-menu items? And how do I insert a image into the sub-menu? I've got this so far:

And what I'm trying to get is(for example - can be more or less sebmenu's):

[rajeshNekkanti]

Hi there, I'm having menu like same but having a error in that while we load the page mega menu is flickering 

site url: https://2aptqmk860j4gkb9-14705360950.shopifypreview.com 

[ysocial]

Hi Richard,

Which file need to be modified to add this code?