Jump to content

fixed sticky Text

By DIN, in Customize with code

Recommended Posts

tuanphan Level 18

tuanphan

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 59
  • Views 5.8k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

Add to Design > Custom CSS /* sticky text */ @media screen and (min-width:768px) { .blog-item-top-wrapper { position: sticky; top: 100px; } }  

tuanphan
tuanphan

Add to Design > Custom CSS @media screen and (min-width:768px) { div#page-section-60ae8fc115eeae708ef70df3>.row>.span-5 { position: sticky; position: -webkit-sticky; top: 0; }

creedon
creedon

@greenbaby12 Add the following to Design > Custom CSS. #page-618697982a9ea677d6d16831 > .sqs-row > .sqs-col-5 {   position : sticky;   top : 109px;      } This is for v7.0 using t

Posted Images

SSong Level 5

SSong

Posted
Posted (edited)
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>

 

Edited by SSong
.
Link to comment
tuanphan Level 18

tuanphan

Posted
Posted
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
SSong Level 5

SSong

Posted
Posted
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>
Link to comment
tuanphan Level 18

tuanphan

Posted
Posted
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
creedon Level 15

creedon

Posted
Posted (edited)
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.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Romer Level 1

Romer

Posted
Posted
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 😄

Link to comment
  • 1 month later...
lookkook Level 4

lookkook

Posted
Posted

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!

 

Link to comment
  • 2 weeks later...
Romer Level 1

Romer

Posted
Posted

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 😄

Link to comment
tuanphan Level 18

tuanphan

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 18

tuanphan

Posted
Posted
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

Screenshot 2022-06-13 at 15.02.45.png

Hi.

Which page are you referring to?

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
saltdesignco_studio Level 1

saltdesignco_studio

Posted
Posted

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!

Sticky.png

Link to comment
tuanphan Level 18

tuanphan

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

Sticky.png

gwyntie23

gwyntie23.

Incorrect password

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 1 month later...
tuanphan Level 18

tuanphan

Posted
Posted
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?

image.thumb.png.8b01e5ae4c898fd80fc09b0619b00604.png

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources