diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index e35f3396e9..f4f28f00f0 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -84,7 +84,6 @@ header.global-navigation { /* Promo */ .global-navigation .aside.promobar { - display: none; /* For when someone switches from desktop to mobile */ z-index: 1; } @@ -569,6 +568,11 @@ header.global-navigation { padding: 40px 0 0; max-height: calc(100vh - 100%); overflow: auto; + box-sizing: border-box; + } + + .global-navigation.has-promo .feds-navItem--megaMenu .feds-popup { + max-height: calc(100vh - 100% - var(--global-height-navPromo)); } [dir = "rtl"] .feds-navItem--megaMenu .feds-popup { diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 4bdab1954a..203c0ee9a9 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -777,7 +777,7 @@ class Gnav { decorateAside = async () => { this.elements.aside = ''; const promoPath = getMetadata('gnav-promo-source'); - if (!isDesktop.matches || !promoPath) { + if (!promoPath) { this.block.classList.remove('has-promo'); return this.elements.aside; } diff --git a/libs/blocks/mobile-app-banner/mobile-app-banner.js b/libs/blocks/mobile-app-banner/mobile-app-banner.js index 9d7106dd07..0e2e546b07 100644 --- a/libs/blocks/mobile-app-banner/mobile-app-banner.js +++ b/libs/blocks/mobile-app-banner/mobile-app-banner.js @@ -59,7 +59,7 @@ function branchInit(key) { /* eslint-enable */ export default async function init(el) { const header = document.querySelector('.global-navigation'); - if (!header) return; + if (!header || header.classList.contains('has-promo')) return; const classListArray = Array.from(el.classList); const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1]; const key = await getKey(product); diff --git a/libs/styles/styles.css b/libs/styles/styles.css index 390675e445..4ef6d8c57f 100644 --- a/libs/styles/styles.css +++ b/libs/styles/styles.css @@ -4,7 +4,7 @@ --global-height-nav: 64px; --global-height-breadcrumbs: 33px; /* stylelint-disable-next-line custom-property-pattern */ - --global-height-navPromo: 65px; + --global-height-navPromo: 72px; --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs)); /* Colors */ @@ -708,13 +708,12 @@ header.global-navigation { visibility: hidden; } -@media (min-width: 900px) { - header.global-navigation.has-promo { - height: auto; - /* stylelint-disable-next-line custom-property-pattern */ - min-height: calc(var(--global-height-nav) + var(--global-height-navPromo)); - } +header.global-navigation.has-promo { + height: auto; + min-height: calc(var(--global-height-nav) + var(--global-height-navPromo)); +} +@media (min-width: 900px) { header.global-navigation.has-breadcrumbs { padding-bottom: var(--global-height-breadcrumbs); } diff --git a/test/blocks/global-navigation/gnav-promo.test.js b/test/blocks/global-navigation/gnav-promo.test.js index 6ef0276fb5..972dd297db 100644 --- a/test/blocks/global-navigation/gnav-promo.test.js +++ b/test/blocks/global-navigation/gnav-promo.test.js @@ -47,13 +47,4 @@ describe('Promo', () => { }); promoMeta.remove(); }); - - it('doesn\'t exist on mobile', async () => { - const promoMeta = toFragment``; - document.head.append(promoMeta); - const nav = await createFullGlobalNavigation({ viewport: 'mobile', hasPromo: true }); - expect(nav.block.classList.contains('has-promo')).to.be.false; - const asideElem = nav.block.querySelector('.aside.promobar'); - expect(asideElem).to.not.exist; - }); });