Can't get rid of whitespace around Sticky Nav

Site URL: https://nagy-design.squarespace.com

Hey there, I implemented a sticky nav, and a couple things I need help with:

• I want the logo to be bigger, extending outside the nav bar
• I do not want any white space around the slider
• The navigation should sit at the bottom, not showing any of the section below. I've changed the vh between 93-95 and messed around with different sizing but still can't get it to work

Here's the code used:

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

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

Site-wide password?

Hey @creedon - password is password 🙂

So it looks on a smaller screen that there's no whitespace but I'm struggling to get the nav to be in the initial viewport without getting cut off. 

Thoughts? 

@katiedunnit

#1. I want the logo to be bigger, extending outside the nav bar

Like this?

#2. I do not want any white space around the slider

Can you take a screenshot of white space?

#3. Try using calc(100vh - XXX) with xxx is a specific value

@tuanphan

So I got rid of the whitespace, but the primary issue I can't seem to fix is the nav bar getting cut off in browser. 

I've tried different numbers (94vh-92vh) and now it's (100vh-92vh) and still happening. Nothing seems to change this.