Desktop burger overlay positioning

Site URL: https://www.lapseofficialfilm.com/

Hello!

I'm helping with a friend's site and am trying to get the burger overlay to be fully visible - right now, the top of the navigation is lined up with where the burger is. I suspect this would also eliminate the scrollbar, which would be great.

This is the custom CSS I have in place so far:

/*navigation burger*/
.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}
\

#header #headerNav {
    display: block;
    text-align: left;
    vertical-align: bottom;
}
.header-inner {
  display:block;
}


/*burger position*/
.header-burger {
    position: absolute;
    bottom: 0;
    left: 11px;
}

/*logo height*/
.header-title-logo img {
    max-height: 500px;
}

Any and all suggestions welcome! Thanks!

9 minutes ago, Ziggy said:

This should remove the top padding that is pushing the menu down, and yes, it should hide the scrollbar:

div.header-menu .header-menu--folder-list {
  padding-top:20px !important;
}

 

Thanks @Ziggy! Unfortunately it doesn't seem to be doing the trick - it's in now and looks the same, even when I try adjusting the padding size.

Yes, that seems to not want to affect the padding, this isn't as good a solution, with a negative margin, but it should work:

.header--menu-open .header-menu {
    margin-top: -550px;
}

You may have to adjust the px to suit

37 minutes ago, Ziggy said:

This should remove the top padding that is pushing the menu down, and yes, it should hide the scrollbar:

div.header-menu .header-menu--folder-list {
  padding-top:20px !important;
}

 

Success, visually! Strangely, the 3 of the 4 nav items didn't keep their hyperlinks? Thank you, @Ziggy!

It's not removed the links, they have gone behind the header and are not visible to click on, I'll see if I can find a solution to that z-index problem.

I'm hoping that this CSS uncovers the links:

.header-inner, .header .header-announcement-bar-wrapper .header-border, .header .header-announcement-bar-wrapper {
    width: 100px;
}

13 minutes ago, Ziggy said:

I'm hoping that this CSS uncovers the links:

.header-inner, .header .header-announcement-bar-wrapper .header-border, .header .header-announcement-bar-wrapper {
    width: 100px;
}

 

It works! You're amazing - really appreciate your help!