diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 1cfb2b79b3..3d90456ee6 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -26,7 +26,7 @@ const utilNavNarrowCheck = function() { /** DP-19336 begin: add padding to hamburger menu to allow scrolling when alerts are loaded */ const hamburgerMainNav = document.querySelector(".ma__header__hamburger__main-nav"); let emergencyAlerts = document.querySelector(".ma__emergency-alerts__content"); -let hamburgerMenuAlertScrolling = function() { +let hamburgerMenuAlertScrolling = function(scrollOffset = 0) { if (hamburgerMainNav !== null && emergencyAlerts !== null) { let alertHeight = document.querySelector(".ma__emergency-alerts").clientHeight || 0; let hamburgerMenuTop = document.querySelector(".ma__header__hamburger__nav-container").offsetTop || 0; @@ -38,7 +38,7 @@ let hamburgerMenuAlertScrolling = function() { } // Add bottom padding when function is initially called. - paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px"; + paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop - scrollOffset + "px"; // Add bottom padding when alert style changes occur. const alertObserver = new MutationObserver(function(mutations) { @@ -59,7 +59,7 @@ let hamburgerMenuAlertScrolling = function() { let currentDisplayValue = document.querySelector(".ma__emergency-alerts__content").style.display; if (currentDisplayValue === oldDisplayValue) { alertHeight = document.querySelector(".ma__emergency-alerts").clientHeight; - paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px"; + paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop - scrollOffset + "px"; } } }); @@ -546,12 +546,14 @@ function openMenu() { }; customScrollTo(scrollOffset, 250); + hamburgerMenuAlertScrolling(scrollOffset); } else { window.scrollTo({ top: scrollOffset, left: 0, behavior: "smooth" }); + hamburgerMenuAlertScrolling(scrollOffset); } } } @@ -682,6 +684,7 @@ if (null !== menuOverlay) { let debouncer; window.addEventListener("resize", function () { + closeMenu(); clearTimeout(debouncer); debouncer = setTimeout( () => { hamburgerMenuAlertScrolling();