Jump to content

Can't get rid of whitespace around Sticky Nav

Recommended Posts

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>

Screen Shot 2022-06-30 at 10.55.02 AM.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...

@katiedunnit

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

Like this?

image.thumb.png.a463f37b78c9c57aeaa1bce7c476da8d.png

#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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.