diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss index c8eb79c3e2fb6319f2f090006367ea8f0ba8a155..369c64011d514b6863aa09c8ae6ae7c9aad44905 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss @@ -163,7 +163,14 @@ border: none; position: absolute; right: 10px; - top: 10px; + top: 0; + + @include breakpoint($extrawide) { + padding: 22px 32px 17px 32px; + } + @include breakpoint($xlarge) { + padding: 30px 32px 30px 32px; + } &__label { @include font-size(18px, 22px); @@ -203,11 +210,6 @@ &:focus { box-shadow: 0 0 16px 0 rgba(0, 83, 121, 0.2); color: var(--link-blue); - - svg { - //height: 42px; - //width: 42px; - } } @include breakpoint($extrawide) { diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx index 06a6c7c9f8091ecf1e15402bac1376f92857289d..df3bf4afe0ddd8b4a25d5cf343f764cf924fed49 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx @@ -72,10 +72,14 @@ export class HyDesktopMenuLinks { if (hyBackdropDiv) { if (state === 'open') { - hyBackdropDiv.classList.add('is-active'); + let me = window.outerHeight - top; + hyBackdropDiv.style.height = `${me}px`; hyBackdropDiv.style.top = `${top}px`; + hyBackdropDiv.style.position = 'absolute'; + hyBackdropDiv.classList.add('is-active'); + //console.log(document.body.clientHeight + ' ' + window.outerHeight + ' ' + top); } else { - hyBackdropDiv.style.top = '0'; + hyBackdropDiv.removeAttribute('style'); hyBackdropDiv.classList.remove('is-active'); } } @@ -134,7 +138,11 @@ export class HyDesktopMenuLinks { // Add shadow backdrop let rect = activeMenuItemSibling.getBoundingClientRect(); - this.showBackdropShadow('open', rect.bottom); + //this.showBackdropShadow('open', rect.bottom); + let shadowTop = this.el.parentElement.classList.contains('hy-site-header--sticky-active') + ? this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height + : this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height; + this.showBackdropShadow('open', shadowTop); // Position submenu block under the activated top menu item. let activeButtonRect = activeMenuItem.getBoundingClientRect(); @@ -245,7 +253,6 @@ export class HyDesktopMenuLinks { let hyHeader = this.el.closest('.hy-site-header') as HTMLElement; const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight; - console.log('leave ' + leaveEvent.clientY + ' ' + headerHeight); if (leaveEvent.clientY < headerHeight - 4) { this.closePanel(); } @@ -267,8 +274,7 @@ export class HyDesktopMenuLinks { if (this.currenOpenMenuId == id) { // Mouse moving around the same menu link - if (moveEvent.clientY < topBorder - 8) { - console.log(topBorder + ' ' + moveEvent.clientY); + if (moveEvent.clientY < topBorder - 4) { this.closePanel(); } }