fixed sticky Text

18 hours ago, SSong said:

@tuanphan

Could you help me? I'm looking to do something similar on an index page sub page #farm-intro, trying to make the the left column (with the FARMING PRACTICES, COMPOST, REDUCED TILL, CROP ROTATION, BIODIVERSITY) sticky within the subpage, and also highlighted somehow (darker color or bigger font size) as one scrolls down past the section on right column. 

I tried to do it myself but it's not working... 😥

Thank you!!

Add to Design > Custom CSS

/* About sticky */
@media screen and (min-width:641px) {
section#farm-intro .span-4 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
section#farm-intro>div {
    overflow: visible !important;
}
section#farm-intro {
    overflow: visible !important;
}
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS

/* About sticky */
@media screen and (min-width:641px) {
section#farm-intro .span-4 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
section#farm-intro>div {
    overflow: visible !important;
}
section#farm-intro {
    overflow: visible !important;
}
}

 

Thank you!! It was working, until I turned them into anchor links and somehow broke everything...

I think you still have permission as the website editor, so feel free to dig around in there if it helps. 

Below is what I put down anchor link. Maybe there's something obvious that I just can't see as my familiarity of css is pretty limited.

Basically, this is what I'm trying to achieve but I have no idea how to implement this into Squarespace. 

<div class="farm-anchor">
<h3><a href="#varieties">Varieties</a></h3>
<h3><a href="#practices">Practices</a></h3>
<h3><a href="">Compost</a></h3>
<h3><a href="">Reduced Till</a></h3>
<h3><a href="">Crop Rotation</a></h3>
<h3><a href="">Biodiversity</a></h3>
</div>

<style>
.farm-anchor a{
font-size:medium;
color:gray !important;
border-bottom-style:none !important;
border-bottom-width:0px
}
.farm-anchor a:hover{
 color:#404040 !important;
}
<style>

On 3/16/2022 at 12:39 PM, SSong said:

Thank you!! It was working, until I turned them into anchor links and somehow broke everything...

I think you still have permission as the website editor, so feel free to dig around in there if it helps. 

Below is what I put down anchor link. Maybe there's something obvious that I just can't see as my familiarity of css is pretty limited.

Basically, this is what I'm trying to achieve but I have no idea how to implement this into Squarespace. 

 

<div class="farm-anchor">
<h3><a href="#varieties">Varieties</a></h3>
<h3><a href="#practices">Practices</a></h3>
<h3><a href="">Compost</a></h3>
<h3><a href="">Reduced Till</a></h3>
<h3><a href="">Crop Rotation</a></h3>
<h3><a href="">Biodiversity</a></h3>
</div>

<style>
.farm-anchor a{
font-size:medium;
color:gray !important;
border-bottom-style:none !important;
border-bottom-width:0px
}
.farm-anchor a:hover{
 color:#404040 !important;
}
<style>

 

I see it still works here

1 hour ago, tuanphan said:

I see it still works here

That's because I remove the style tag, would love to know how to make it work with the style tag added on. Thank you!

On 3/18/2022 at 8:24 PM, SSong said:

That's because I remove the style tag, would love to know how to make it work with the style tag added on. Thank you!

Where did you add style tag?

11 hours ago, tuanphan said:

Where did you add style tag?

I took it off, because if I added it on, it would break the whole thing.

Here's what I added, maybe I didn't have the right target?

<style>
.farm-anchor a{
font-size:medium;
color:gray !important;
border-bottom-style:none !important;
border-bottom-width:0px
}
.farm-anchor a:hover{
 color:#404040 !important;
}
<style>

11 hours ago, SSong said:

I took it off, because if I added it on, it would break the whole thing.

Here's what I added, maybe I didn't have the right target?

<style>
.farm-anchor a{
font-size:medium;
color:gray !important;
border-bottom-style:none !important;
border-bottom-width:0px
}
.farm-anchor a:hover{
 color:#404040 !important;
}
<style>

Hi, I mean where did you add, Custom CSS, Code Injectiion, Page Header, Code Block or

On 3/22/2022 at 3:57 AM, tuanphan said:

Hi, I mean where did you add, Custom CSS, Code Injectiion, Page Header, Code Block or

Ahh sorry, I added it within the code block.

Hello Everyone!!

Could you help me, please?

Could the code also be used for other pages? I need it for the rest of the portfolio.

Thanks

https://penguin-blue-jseg.squarespace.com/

password: romer123

6 hours ago, Romer said:

Could the code also be used for other pages? I need it for the rest of the portfolio.

Add the following to Design > Custom CSS.

/*

  portfolios left column sticky
  
  uses LESS syntax
  
  */
  
html:not( .squarespace-damask ) body {

  &.collection-62615a0bc6a0ed63b43c7f54, // german
  &.collection-625e85b3b3a5b61fc9b85c0c, // english
  
    {
    
      #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {
      
        position : sticky;
        top : 0;
        
        }
        
      }
      
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

4 hours ago, creedon said:

Add the following to Design > Custom CSS.

body.collection-62615a0bc6a0ed63b43c7f54 #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

THANKS! @creedon 

Could you do the same for the other portfolio page, please?  German portfolio works perfect, but I also need it for the English portfolio.

thanks again 😄

59 minutes ago, Romer said:

Could you do the same for the other portfolio page

I have updated my post.

Hi! I am trying to figure out how I can make the Terms of Service + Links underneath it sticky while the section on the right scrolls.

Do I just take this block? block-yui_3_17_2_1_1653532161560_35361 and this block-yui_3_17_2_1_1653530592371_3216 and insert them into the examples shown throughout this thread? That wasn't working for me, so maybe I am grabbing the wrong class names?

I was also curious if there is a way that I can group Terms of Service + Links underneath it to name it all one section.

https://lettuce-azalea-k7l4.squarespace.com/terms-brine (pw: footerhelp)

Thank you in advance!

@lookkook

It appears you solved your issue?

HELLO!!

I'm using this code on my website.

body.collection-62615a0bc6a0ed63b43c7f54 #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }

body.collection-625e85b3b3a5b61fc9b85c0c #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }

How can i make this only work on my desktop site?

Thanks 😄

On 6/8/2022 at 5:32 AM, Romer said:

HELLO!!

I'm using this code on my website.

body.collection-62615a0bc6a0ed63b43c7f54 #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }

body.collection-625e85b3b3a5b61fc9b85c0c #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }

 

How can i make this only work on my desktop site?

 

Thanks 😄

Use this code

@media screen and (min-width:992px) {
body.collection-62615a0bc6a0ed63b43c7f54 #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }


body.collection-625e85b3b3a5b61fc9b85c0c #page .page-section:first-child .sqs-layout > .sqs-row > .sqs-col-6:first-child {

  position : sticky;
  top : 0;
  
  }
}

Wanting to have the text on the left fixed whilst being able to scroll through the images on the right, what code shall i use 

https://hexahedron-cardioid-rm6c.squarespace.com/config/pages

TEST123

18 hours ago, AlfieOuthounds said:

Wanting to have the text on the left fixed whilst being able to scroll through the images on the right, what code shall i use 

https://hexahedron-cardioid-rm6c.squarespace.com/config/pages

TEST123

Hi.

Which page are you referring to?

https://hexahedron-cardioid-rm6c.squarespace.com/?noredirect

Hey there!

I am having issues making my blog posts sticky. I am using these posts as a portfolio so I have a grid gallery on the left and text on the right. I want to make the text on the right sticky. 

The site is https://emerge-design.squarespace.com/projects/shell-canada and the password is gwyntie23.

Is there a way to make it universal to all blog posts so that it doesn't need to be added anytime a new blog post is included? The layout will always be the same. 

Thank you!

On 1/11/2023 at 1:15 AM, saltdesignco_studio said:

Hey there!

I am having issues making my blog posts sticky. I am using these posts as a portfolio so I have a grid gallery on the left and text on the right. I want to make the text on the right sticky. 

The site is https://emerge-design.squarespace.com/projects/shell-canada and the password is gwyntie23.

Is there a way to make it universal to all blog posts so that it doesn't need to be added anytime a new blog post is included? The layout will always be the same. 

Thank you!

gwyntie23

gwyntie23.

Incorrect password

Hi 

I would like to make the text 'Tech Blog' sticky within its section

https://dove-mango-p3cr.squarespace.com/

Please help

On 1/30/2023 at 10:57 PM, Christina90 said:

Hi 

I would like to make the text 'Tech Blog' sticky within its section

https://dove-mango-p3cr.squarespace.com/

 

Please help

What is password?

Hi, I would like the text links in my second section (#block-yui_3_17_2_1_1678178543410_10171) to be sticky and show over the gallery (section[data-section-id="64040f49c091fd5a9188af88"]) on the right side as well. Could anyone help me with this?

My page is https://wrasse-grouper-8fhf.squarespace.com/, password is squarespace. 

On 3/7/2023 at 4:15 PM, charlineca said:

Hi, I would like the text links in my second section (#block-yui_3_17_2_1_1678178543410_10171) to be sticky and show over the gallery (section[data-section-id="64040f49c091fd5a9188af88"]) on the right side as well. Could anyone help me with this?

 

My page is https://wrasse-grouper-8fhf.squarespace.com/, password is squarespace. 

I see you figured it out?

I'mm trying to do the same on https://www.paulinaramis.com/press - I would just like the left column to be sticky (the one that includes the article titled "CAPSULE WARDROBES MAKE STYLE EASY". I've tried everything I can think of