diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index 79f1138a85..94d0df9d0d 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -89,7 +89,6 @@ header.global-navigation { /* Hamburger toggle */ .feds-toggle { - width: 60px; margin: 0; padding: 0; border: none; @@ -99,6 +98,7 @@ header.global-navigation { cursor: pointer; font-size: 20px; font-weight: 300; + padding-left: 20px; } .feds-toggle:before { @@ -125,6 +125,7 @@ header.global-navigation { .feds-brand { display: flex; + padding-left: 22px; } .feds-logo { diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 34844d693c..0c4cc1dae7 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -791,7 +791,13 @@ class Gnav { .elements .navWrapper ?.querySelectorAll('.feds-nav > section.feds-navItem') - ?.length === 1; + ?.length <= 1; + + hasMegaMenu = () => this + .elements + .navWrapper + ?.querySelectorAll('.feds-nav > section.feds-navItem') + ?.length >= 1; toggleMenuMobile = () => { const toggle = this.elements.mobileToggle; @@ -800,7 +806,7 @@ class Gnav { disableMobileScroll(); const sections = document.querySelectorAll('header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink'); animateInSequence(sections, 0.075); - if (this.isLocalNav()) { + if (this.isLocalNav() && this.hasMegaMenu()) { const section = sections[0]; queueMicrotask(() => section.click()); } @@ -816,7 +822,7 @@ class Gnav { }; decorateToggle = () => { - if (!this.mainNavItemCount) return ''; + if (!this.mainNavItemCount || !this.hasMegaMenu()) return ''; const toggle = toFragment`