Jump to content

Closing Gap at Top of Page

Recommended Posts

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");
}
}

 

Screen Shot 2023-04-13 at 4.08.00 PM.png

Link to comment
  • Replies 17
  • Views 651
  • Created
  • Last Reply

Top Posters In This Topic

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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! 

Screen Shot 2023-04-17 at 4.33.24 PM.png

Edited by kaydotjpg
Link to comment

@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. 

Edited by kaydotjpg
Link to comment
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.

Link to comment
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)

Edited by Vicks
Link to comment
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:

image.thumb.png.00ebd202ba9a73f7dc35732ce1461dfb.png

image.thumb.png.056d2c2b01fab6964095398ac8bfaa43.png

 

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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:

image.thumb.png.51726a88cc1fee7a7da4149f650c979b.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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;
}
Edited by kaydotjpg
Link to comment

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;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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");
}
}
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.