Moved header to bottom navigation and now there is a big gaping white space where header was

Hi,

I added in code to move my header with the hamburger nav to bottom of the mobile screen, but now there is a big white gaping spot where the header used to be - how do I fix this / what is the issue? 

/*<---- Move header to bottom on mobile ----->*/
@media only screen and (max-width: 768px) {
    /* Sticky Header at the Bottom for Mobile */
    header#header {
  position: sticky!important; /* Maintain sticky positioning */
  bottom: 0; /* Stick to the bottom */
  width: 100%; /* Full width */
  z-index: 9999; /* High z-index to stay on top */
  order:2;
}
/* Adjustments for the mobile menu */
.header-menu {
 position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: auto;
  max-height: 100%;
  overflow-y: hidden !important;
  z-index: 1;
}
/* Move CTA Button Placement */
.header-menu-cta {
  position: sticky;
  bottom: 25%!important; /* this will adjust the position of the CTA Button, adjust it your liking */
}
}

Screenshot for reference - it's where that white space on top is. 

Thank you in advance!!!

Can you share your website URL?

It's not public yet see below for a scroll thru? It's that gaping spot on top in white

On 2/27/2024 at 7:20 AM, 1ittykitty said:

It's not public yet see below for a scroll thru? It's that gaping spot on top in white

 

You can follow this to share url, so we can check your problem easier