From 9c815f3d814989d9526be09614f6691210ed657c Mon Sep 17 00:00:00 2001 From: Chandan Sharma Date: Fri, 22 Nov 2024 13:18:23 -0800 Subject: [PATCH 1/2] Updated menu layout option and added the new menu styles --- blocks/header/header.css | 85 +++++++++++++++++++++++++++++++++++++++- blocks/header/header.js | 45 +++++++++++++++++++++ 2 files changed, 128 insertions(+), 2 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 9c8985d3..2189c01d 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -2,6 +2,7 @@ /* header and nav layout */ header { + position: fixed; float: left; clear: none; border-bottom: 1px solid var(--neutral-sand); @@ -10,6 +11,7 @@ header { left: 0; top: 0; transition: all .5s ease; + z-index: 99999; font-family: var(--sans-serif-font-medium); } @@ -23,6 +25,7 @@ header nav { align-items: center; z-index: 1; width: 100%; + height: var(--nav-height-mobile); margin: 0 auto; padding: 0 24px; box-sizing: border-box; @@ -86,6 +89,79 @@ header nav .nav-sections .mega-menu a.link-with-icon span.icon svg { height: var(--spacer-layout-02); } +header .solution-new-dualmenu-top > div { + flex-direction: column; + margin-bottom: 0 !important; + padding-bottom: 48px; +} + +header .solution-new-dualmenu-top .first-div-wrap h3{ + margin-bottom:16px; +} + +header .solution-new-dualmenu-top .first-div-wrap p{ + margin-top: 16px; + font-size: 16px; + color: #5C5A57; +} + +header .solution-new-dualmenu-top .second-div-wrap > a { + display: flex; + gap: var(--gap-16); + border: none; + margin: 0 0 var(--spacer-element-03); + text-decoration: none; + color: currentcolor; +} + +header .solution-new-dualmenu-top .second-div-wrap { + margin-left: 0; + margin-top: 24px; +} + +header .solution-new-dualmenu-top .second-div-wrap > a p{ + margin: 0; + height: var(--spacer-layout-02); +} + +header .solution-new-dualmenu-top .second-div-wrap > a h5{ + font-size: var(--font-size-14); + letter-spacing: 0.14px; + margin: 0; +} + +header .solution-new-dualmenu-bottom p{ + font-size: 16px; + color: #5C5A57; + margin: 16px 0; +} + +header .solution-new-dualmenu-bottom div[data-valign="middle"] > h5 { + margin-top: 44px; + margin-bottom: 5px; +} + +header .solution-new-dualmenu-bottom div[data-valign="middle"] > h5 + p { + margin-top: 5px; + font-size: 14px; + color: #5C5A57; +} + +header .solution-new-dualmenu-bottom p .icon { + display: block; + max-width: 196px; +} + +header .solution-new-dualmenu-bottom p .icon svg{ + display: block; +} +header .solution-new-dualmenu-bottom p .icon img + img { + display: none !important; +} +header .solution-new-dualmenu-bottom p.button-container { + margin-top: 12px !important; +} + /* tablet nav */ @media only screen and (min-width: 768px) { header nav { @@ -100,6 +176,10 @@ header nav .nav-sections .mega-menu a.link-with-icon span.icon svg { /* mobile/tablet nav styles */ @media only screen and (max-width: 1199px) { + header { + height: var(--nav-height-mobile); + } + header nav { display: flex; justify-content: space-between; @@ -315,6 +395,8 @@ header nav .nav-sections .mega-menu a.link-with-icon span.icon svg { /* header */ header { padding: 0; + max-height: 130px; + height: 130px; display: flex; align-items: flex-end; } @@ -522,7 +604,7 @@ header nav .nav-sections .mega-menu a.link-with-icon span.icon svg { left: 0; width: 100vw; height: auto; - max-height: 100%; + max-height: none; overflow: hidden; background-color: white; color: var(--neutral-carbon); @@ -641,7 +723,6 @@ header nav .nav-sections .mega-menu a.link-with-icon span.icon svg { header nav .nav-sections > ul > li[aria-expanded='true'] > ul.mega-menu .mega-menu-content { flex: 1; - overflow: auto; } header nav .nav-sections > ul > li[aria-expanded='true'] > ul > li.level-two.mega-menu .mega-menu-content li > ul { diff --git a/blocks/header/header.js b/blocks/header/header.js index b200a959..9e8bd79b 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -73,6 +73,51 @@ function buildMegaMenu(navItem) { cell.appendChild(link); linkParent.remove(); }); + // New Dual menu + const menuLinksDual = navItem.querySelectorAll('.columns.solution-new-dualmenu-top p > a'); + [...menuLinksDual].forEach((link) => { + const cell = link.closest('div'); + cell.classList.add('second-div-wrap'); + const linkParent = link.parentElement; + link.textContent = ''; + while (linkParent.previousElementSibling && linkParent.previousElementSibling.nodeName !== 'A') { + link.prepend(linkParent.previousElementSibling); + } + link.setAttribute('title', link.querySelector('h5').textContent); + if (link.querySelector('span.icon')) { + link.classList.add('link-with-icon'); + } + cell.appendChild(link); + linkParent.remove(); + }); + const solDual = navItem.querySelector('.columns.solution-new-dualmenu-top > div'); + + if (solDual) { + const newDiv = document.createElement('div'); + newDiv.classList.add('first-div-wrap'); + + const h3Element = solDual.querySelector('h3'); + const pElement = h3Element ? h3Element.nextElementSibling : null; + + if (h3Element && pElement) { + newDiv.appendChild(h3Element); + newDiv.appendChild(pElement); + solDual.prepend(newDiv); + } + } + // Select the parent container + const buttons = navItem.querySelectorAll('.solution-new-dualmenu-bottom a.button.secondary'); + + buttons.forEach((button) => { + button.classList.replace('secondary', 'tertiary'); + + const emTag = button.parentElement; + if (emTag && emTag.tagName.toLowerCase() === 'em') { + const buttonContainer = emTag.parentElement; + buttonContainer.insertBefore(button, emTag); + emTag.remove(); + } + }); } function buildFeatured(navItem) { From 80491a3b230e715b234fb074737937fb04aba0d5 Mon Sep 17 00:00:00 2001 From: Chandan Sharma Date: Fri, 22 Nov 2024 13:26:35 -0800 Subject: [PATCH 2/2] Updated header --- blocks/header/header.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blocks/header/header.css b/blocks/header/header.css index 2189c01d..f25120c9 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -155,9 +155,11 @@ header .solution-new-dualmenu-bottom p .icon { header .solution-new-dualmenu-bottom p .icon svg{ display: block; } + header .solution-new-dualmenu-bottom p .icon img + img { display: none !important; } + header .solution-new-dualmenu-bottom p.button-container { margin-top: 12px !important; }