Closing Gap at Top of Page

password: tunika

Hi! I am working on a client's site. They wanted to have the side navigation (as you can see). Then, they wanted a scrolling text bar at the very top of the page. However, I am having a hard time making the scrolling text bar flush with the top of the page. It seems despite the navigation being on the sides of the site, there's still some space at the top where it use to live. Is there away to close this gap? Thanks

For reference, this is the code I am using to force my header to the sides: 

//SPIDE NAVIGATION//
@media screen and (min-width:768px) {
a#site-title {
    position: fixed;
    top: 50%;
    transform: rotate(270deg) translateY(-30%);
    left: -65px;
  font-size: 1.5rem;
 
}
nav.header-nav-list {
    position: fixed;
    top: 50%;
    transform: rotate(90deg) translateY(-50%);
    flex-direction: column;
    right: 60px;
}
nav.header-nav-list>div:nth-child(1) {
    position: fixed;
    left: calc(~"50% - 100px");
}
nav.header-nav-list>div:nth-child(2) {
    position: fixed;
    left: calc(~"50% - 35px");
}
nav.header-nav-list>div:nth-child(3) {
    position: fixed;
    left: calc(~"50% + 50px");
}
nav.header-nav-list>div:nth-child(4) {
    position: fixed;
    left: calc(~"50% + 150px");
}
}

Can you share the website URL? The URL asked for in posting the question doesn't come through here.

Also interested to know because I would like the same for my website. Thanks in advance ☺️

@Ziggy https://pineapple-saxophone-jrkr.squarespace.com/

It looks like the first section is set to 100vh (or L) in the settings with the contents vertically aligned to the center, so that would be the first thing to change, I would suggest top aligned at least, maybe set to "Fill Screen"? If there's still a gap at the top it might be to do with how you're dealing with the header, but if you can fix this first I can look at it again.

@Ziggy thanks for your response. When you said "first section is set to 100vh" I assume you are talking about the height of the section (there is only that 1 section on the homepage)- which I went ahead and changed it "1" height. I attached a photo so you can see what I mean, and to make sure I made the change you were referring to. Next, I wasn't totally sure what you meant by "contents vertically aligned to the center, suggest top aligned at least" (in the site? within the code?)- could you elaborate on that part? Thanks! 

can you try this custom css?

<style>
  #header {
    height:0px;
  }
</style>

@Vicks thank you for this. At first it gave me an error, but I deleted the "<style>" and "</style>" and it worked- on every page BUT the homepage 🤣 Which, I have the same scrolling block at the top of each page, so it closed those gaps, woohoo! but the gap on the homepage still remains. 

42 minutes ago, kaydotjpg said:

@Vicks thank you for this. At first it gave me an error, but I deleted the "<style>" and "</style>" and it worked- on every page BUT the homepage 🤣 Which, I have the same scrolling block at the top of each page, so it closed those gaps, woohoo! but the gap on the homepage still remains. 

div#yui_3_17_2_1_1681771054549_77 {
    min-height: 100vh;
}

its just some hack. I am not sure if this will break the other pages. Just test it once pls.

@Vicks applied, but got nothin', dang!

1 hour ago, kaydotjpg said:

@Vicks applied, but got nothin', dang!

Try this

#yui_3_17_2_1_1681776145571_77 {
	min-height: 100vh;
}

// if this doesnt work then try this selector below

#page #sections .content-wrapper {
    min-height: 100vh;
}

Whats happening is that your homepage haven't got enough content, thus its keeping the content vertically centred leaving gap on top and bottom. Whereas on other page your content height is more than your browser window height. Thats why its not leaving any gaps. If you reduce your window's height, you will see that the gap disappears.

With min-height:100vh, we are asking it to stretch the height of content to minimum 100% of viewport height (browser window height)

12 hours ago, kaydotjpg said:

@Ziggy thanks for your response. When you said "first section is set to 100vh" I assume you are talking about the height of the section (there is only that 1 section on the homepage)- which I went ahead and changed it "1" height. I attached a photo so you can see what I mean, and to make sure I made the change you were referring to. Next, I wasn't totally sure what you meant by "contents vertically aligned to the center, suggest top aligned at least" (in the site? within the code?)- could you elaborate on that part? Thanks! 

I'm not sure quite what's going on here:

The contents seem to be aligned to the middle of the page, despite the settings you showed.

Can I suggest that you set the section to L rather than fill screen and leave the alignment at top. Then try this Custom CSS:

#collection-63ffa0a31dd4bf364f5ab832 {
  .page-section {
    padding-top: 0vw !important;
  }
}

I don't know what's causing the coral "section" underneath the one section, it's a full screen height below:

@Ziggy @Vicks  So super weird, when I applied the code below, it worked perfectly on the homepage. I got so excited, but when I checked out my other pages (Writing, Mood, About)- the code made the section with the scrolling block huge and long? What the heck. Check it out (I left the code on the site so you can see). I feel like we're getting closer though!

site: https://pineapple-saxophone-jrkr.squarespace.com/

password: tunika

#page #sections .content-wrapper {
    min-height: 100vh;
}

Looks like this CSS code should help, but I don't know what I'm suggesting disabling!

#collection-63ffa0a31dd4bf364f5ab832 {
  .loom-companion-mv3 {
    display:none !important;
  }
}

Did you apply css from @Ziggy ? because they looks normal to me now the other pages. How do I see the bug?

@Ziggy just tried that last code you gave me, but it didn't work. 

The code "#page #sections .content-wrapper { min-height: 100vh; }" is the only code that has worked on the homepage so far, but for some reason expands the scrolling block section on every other page. So weird. I took it off. Now we are back to square one. Every page looks great, but homepage still has the gap. I'm wondering if the issue lies within the code that I'm using for the vertical split header. What do y'all think? Feeling desperate to fix this issue! And really appreciate y'all help so far 

//SPI NAVIGATION//
@media screen and (min-width:768px) {
a#site-title {
    position: fixed;
    top: 50%;
    transform: rotate(270deg) translateY(-30%);
    left: -65px;
  font-size: 1.5rem;
 
}
nav.header-nav-list {
    position: fixed;
    top: 50%;
    transform: rotate(90deg) translateY(-50%);
    flex-direction: column;
    right: 60px;
}
nav.header-nav-list>div:nth-child(1) {
    position: fixed;
    left: calc(~"50% - 100px");
}
nav.header-nav-list>div:nth-child(2) {
    position: fixed;
    left: calc(~"50% - 35px");
}
nav.header-nav-list>div:nth-child(3) {
    position: fixed;
    left: calc(~"50% + 50px");
}
nav.header-nav-list>div:nth-child(4) {
    position: fixed;
    left: calc(~"50% + 150px");
}
}

were you able to fix this issue? whats the state of the website at the moment? If I want to give it anther try 😄 

Hey, @kaydotjpg!

To fix the gap, do the following:

.your--bar {
  position: fixed;
  top: 0;
  left: 0;
}

.the-element-below-your-bar {
  margin-top: XYZpx (XYZ - the height of your bar)
}

When you set position to fixed, the element goes out of the normal flow and "floats" on top of the rest of the code. It means that the space that it used to occupy is now empty, which means that the element that goes right after your bar will take it up and will partly hide behind it. To fix this add margin-top to that element.

Hope it helps!

Best regards,

Vsevolod