Submenu background colour to fill full width of page

Hi all,

I would like it so that the background to the submenu drop down links, fills the width of the page.

Please let me know.

This code, works - however it is sitting above the header:

/* Make header allow overflow */

.header,

.header-wrapper,

header {

overflow: visible !important;

}

/* Full-width dropdown */

.header__submenu,

.dropdown-menu {

position: fixed !important;

left: 0 !important;

right: 0 !important;

top: var(–header-height); /* sits directly under header */

width: 100vw !important;

margin: 0 !important;

}

Hey @marycrichton123

Share your store URL and Password if enabled.

Best,
Moeed

PWD: meelib

PWD: meelib

@marycrichton123, did you try moving your code to the FOOTER so it loads after?

The simple way to edit theme and change Menu type to Mega menu

Best regards,
Dan from Ryviu: Product Reviews App

@Emma_at_Trepoly no, would that work?

Hey I am trying to make this background of the subheading go across the full screen:

CCS as it stands:

.header__submenu.list-menu {

width: 100vw;

left: 50%;

transform: translateX(-50%);

padding-left: calc((100vw - 1600px) / 2);

padding-right: calc((100vw - 1600px) / 2);

}

As it looks right now:

Hey I am trying to make this background of the subheading go across the full screen:

CCS as it stands:

.header__submenu.list-menu {

width: 100vw;

left: 50%;

transform: translateX(-50%);

padding-left: calc((100vw - 1600px) / 2);

padding-right: calc((100vw - 1600px) / 2);

}

As it looks right now:

I see you made it works now

I almost have. I used this code:

However, I need the Sub Nav Links to be below the relevent Main Menu Link, at the moment they are left aligned