diff --git a/blocks/header/header-megamenu.js b/blocks/header/header-megamenu.js index 43a2cdb08..17400ae07 100644 --- a/blocks/header/header-megamenu.js +++ b/blocks/header/header-megamenu.js @@ -87,9 +87,6 @@ function buildMegaMenu(block, content) { ), ); - const backgroundImg = content.querySelector('.submenu-background img'); - submenu.style.backgroundImage = `url(${backgroundImg.src})`; - // Get the list item in the header block that contains a div with attribute menu-id // that matches the menuId const item = block.querySelector(`div[menu-id="${menuId}"]`).closest('li'); diff --git a/blocks/header/header.css b/blocks/header/header.css index 2cf5da30f..ddde00b46 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -482,7 +482,18 @@ header .nav-tabs .menu-nav-submenu { opacity: 1; visibility: visible; position: absolute; - background: var(--background-color) url('/images/header-background-filler.jpg') no-repeat right bottom; + background: linear-gradient(90deg, rgb(64, 172, 100) 0, rgba(70 146 140) 50%, rgb(17, 149, 185) 100%) !important; +} + +header .nav-tabs .menu-nav-submenu::after { + background-image: url("/images/wave-background-bottom.webp"), url("/images/wave-background-bottom.png"); + background-size: 100% 100%; + height: 82px; + width: 100%; + position: absolute; + padding: 0; + bottom: 0; + content: ""; } header .cards-submenu > div { @@ -1726,7 +1737,7 @@ header .actionable-card-submenu.customercare-portal > div:nth-child(2) > div:nth } header .nav-tabs .menu-nav-submenu { - min-height: 782px; + min-height: 750px; padding-bottom: 9.4%; box-shadow: inset 0 19px 33px -28px #333F; background-repeat: no-repeat;