diff --git a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html index 3d1ddb9b5e..711acc5c64 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html +++ b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html @@ -1,6 +1,6 @@ {% load static wagtailcore_tags wagtailadmin_tags nav_tags %} -{% fragment as content_base_styles %}tw-overflow-y-auto tw-transition-all tw-duration-500 tw-bg-white xlarge:tw-bg-transparent xlarge:tw-max-w-[1200px]{% endfragment %} +{% fragment as content_base_styles %}tw-overflow-y-auto tw-transition-all tw-duration-500 tw-bg-white xlarge:tw-bg-transparent xlarge:tw-max-w-[1200px] xlarge:tw-transition-none xlarge:tw-duration-0{% endfragment %} {% fragment as dropdown_selector_base %}tw-container tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-gap-4{% endfragment %} {% fragment as content_desktop %}xlarge:tw-px-0 xlarge:tw-hidden{% endfragment %} diff --git a/source/js/components/nav/desktop-dropdown.js b/source/js/components/nav/desktop-dropdown.js index 611b528629..9587bcf34d 100644 --- a/source/js/components/nav/desktop-dropdown.js +++ b/source/js/components/nav/desktop-dropdown.js @@ -79,6 +79,8 @@ class NavDesktopDropdown extends Accordion { sibling.classList.remove("tw-highlighted"); } }); + + document.addEventListener("scroll", this.handleScroll); } closeSiblings() { @@ -115,7 +117,25 @@ class NavDesktopDropdown extends Accordion { this.closeAccordion(this.accordion, this.titleButton, this.content); this.closeSiblings(); + + document.removeEventListener("scroll", this.handleScroll); } + + scrollListener() { + const wideScreenMenuContainer = document.querySelector(".wide-screen-menu-container"); + if (!wideScreenMenuContainer) { + return; + } + const newTopOffset = wideScreenMenuContainer.getBoundingClientRect().bottom; + const currentTopOffset = parseFloat( + this.content.style.top.replace("px", "") + ); + if (currentTopOffset !== newTopOffset) { + this.content.style.top = `${newTopOffset}px`; + } + } + + handleScroll = this.scrollListener.bind(this); } export default NavDesktopDropdown;