close button alignment and shadow for sticky header

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) {

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();
         }
       }