Fixed header position mobile menu not working.

Hey everyone, I'm currently running into an issue with my website. On desktop mode it displays perfect, however on mobile view on the homepage only the menu isn't opening, and when you scroll down the website the header/menu gets hidden behind the first few sections, and then it reappears. 

URL – https://www.thirtyfivethestudio.com/

For reference, I purchased a plugin for the website that creates this loading page effect on desktop mode. This code is in the advance, page header code injection section for the homepage only and is causing the issue. I have reached out to the plugin seller but thought it was also worth asking on here incase anyone can see what is wrong? Because it should only be targeting desktop mode not mobile. When I remove this code from the website, mobile view then works ok again but I loose the loading/intro section on desktop.

Any advice would be greatly appreciated 🙂

<style>
@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
  z-index: 4000 !important;
  width: 100vw;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(94vh - 93px)!important;
}
}
</style>

<script>
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

Hi,

I see it already fine, did you solve or you still need help?