Jump to content

Make text block sticky

Recommended Posts

Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046

https://uxplaybook.org/ux-accelerator


However, this code does not work 

Quote

/* Text sticky */
@media screen and (min-width:768px) {
  .fe-block.fe-block-yui_3_17_2_1_1664264642296_1491046 {
    position: sticky;
    top: 200;
      position: -webkit-sticky;
    z-index: 999;
  }}

image.thumb.png.a72c3449f00a2df521c11531b2fa4396.png

Edited by semigrownkid
Additional info
Link to comment
On 9/27/2022 at 11:36 PM, semigrownkid said:

Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046

https://uxplaybook.org/ux-accelerator


However, this code does not work 

image.thumb.png.a72c3449f00a2df521c11531b2fa4396.png

Your top value is invalid

Use 200px

not 200

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
On 9/27/2022 at 8:21 AM, ellyferguson0 said:

I'm really needing help with this. 

I upgraded the section of my sticky split accidentally to fluid. I obiously can't go back now. 
 

The sticky split no longer works. I had on the left sticky and on the right it scrolled 

What do i do? 

 

https://pece.squarespace.com/config/

Which text are you referring on Services page?

Password2022

https://pece.squarespace.com/portfolio-1?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
On 9/30/2022 at 10:21 AM, ellyferguson0 said:

Just the section that is split

so Our Services, Portfolios, Our clients - all sticky 

Right side from Electrical services down to infrastructure services - All scrolling 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.fe-block-6332330d942ae48776454e90 {
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    z-index: 9999;
}
}

 

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
On 10/1/2022 at 5:00 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.fe-block-6332330d942ae48776454e90 {
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    z-index: 9999;
}
}

 

no 😞

I also need the following blocks to stick (not just .fe-block-6332330d942ae48776454e90
.fe-block-6332330daa6efe870b10baac
.fe-block-6332330d1b0dd326d60306d6
.fe-block-6332330d8d6c38fd59c05e5e
.fe-block-6332330dffffcfe7d7cf4df2
.fe-block-6332330db553e9ec8dd3d62e

 

 

Link to comment
On 10/11/2022 at 5:02 AM, adrianajaviera said:

Hi @tuanphan I've read all the comments and tried all the codes but nothings seems to work when trying to get my text box sticky to the left of the page. Could you please help? Appreciate it!

https://mouse-cow-w3ep.squarespace.com/services

pssw: Danielle2022

I don't see text on left. Can you take a screenshot?

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
  • 1 month later...

@semigrownkid @tuanphan have you managed to figure this out?

I have the same issue, trying to make the block in the screenshot sticky so it appears on the entire site as you scroll down.

Tried the below code but it does not seem to work

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

 

Screenshot 2022-11-17 at 13.05.24.png

Screenshot 2022-11-17 at 13.07.35.png

Edited by Leanie
additional information
Link to comment
8 minutes ago, Leanie said:

Tried the below code but it does not seem to work

Check the parent element. If it has an overflow property set or has no height set then the sticky element won't have any area to stick to when scrolling. 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
3 minutes ago, paul2009 said:

Check the parent element. If it has an overflow property set or has no height set then the sticky element won't have any area to stick to when scrolling. 

@paul2009 Thanks, I managed to get it to work, the only issue is that it's sticking to the left side of the site and I need it on the right with a bit of padding. Below is the code that ended up working to get it to this point

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 {
    position: fixed;
    top: 300; 
    position: -webkit-sticky;
    z-index: 999;
}
}

 

Screenshot 2022-11-17 at 13.23.36.png

Link to comment
On 11/17/2022 at 6:26 PM, Leanie said:

 Thanks, I managed to get it to work, the only issue is that it's sticking to the left side of the site and I need it on the right with a bit of padding. Below is the code that ended up working to get it to this point

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 {
    position: fixed;
    top: 300; 
    position: -webkit-sticky;
    z-index: 999;
}
}

 

Screenshot 2022-11-17 at 13.23.36.png

try adding right: 0; under top: 300;

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
  • 1 month later...
On 12/29/2022 at 1:28 AM, skiservice said:

can't seem to get anything to work for this left hand sticky block that is contained in a full page column

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  @media only screen and ( min-width : 768px ) {
  
    .Main-content .sqs-layout > .sqs-row > .sqs-col-3 {
    
      position : sticky;
      top : 0;
      
      }
      
    }
    
  </style>

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
  • 2 weeks later...
53 minutes ago, dominyka94 said:

Why does the side menu stick to the screen on Chrome but not on Safari?

Because on Chrome your CSS is set to use postition : fixed; and on Safari you use position : -webkit-sticky;,

.fe-block.fe-block-yui_3_17_2_1_1668721104263_891689,
.fe-block.fe-block-yui_3_17_2_1_1672921974881_2811875

  {
    
  font-weight : 400;
  font-size : 14px;
  transition : all .3s;
  line-height : ;
  position : fixed;
  top : 300px;
  left : 15px;
  position : -webkit-sticky;
  z-index : 999;
  
  }

I don't think you're going to be able to get the effect I think you want because of the way sticky works. For sticky to work its parent container has to be big enough for the element to stick within.

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

Hello, I am trying to create a sticky vertical navigation bar (basically trying to replicate this website exactly, see here). To do so, I opted to disable the horizontal navigation using CSS, and create sticky code block to fake a vertical nav bar (maybe this isn't the best way?) — I have a few questions. 

I used some of the code above and had some success, but the left nav bar isn't 100% sticky (if you scroll up or down, the left nav bar moves slightly). I am also trying to add a vertical line next to the bar (which I used via border-right on the code block), but the vertical line isn't 100% flush with the edges. 

1. How can I make my nav bar 100% sticky? 
2. How can I add a vertical line without white space on top or below? 
3. Is there to keep apply this fake nav bar fixed to every page on my website? 
4. In general, is there a better way to create a sticky vertical navigation bar? 

startstop.site  (password: 123) 

Thanks!

Screen Shot 2023-01-07 at 9.04.56 PM.png

Edited by azbd77j8
Link to comment
On 12/30/2022 at 3:44 PM, v-web said:

Thank you so so much. Excellent, works perfectly 

Small question - on mobile if I want to make it (the menu) disappear behind the content or simply stay at the top is this possible?

If not possible I would also be happy for the menu to just sit at the bottom of the page after all the content.

https://www.verbier.com/ski-passes

Thank you very much

On 12/29/2022 at 10:29 PM, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .Main-content .sqs-layout > .sqs-row > .sqs-col-3 {
  
    position : sticky;
    top : 0;
    
    }
    
  </style>

Let us know how it goes.

 

Screenshot 2023-01-12 at 15.27.49.png

Screenshot 2023-01-12 at 15.28.02.png

Link to comment
6 hours ago, v-web said:

on mobile if I want to make it (the menu) disappear behind the content or simply stay at the top is this possible?

I have updated my December 29, 2022 code post.

Let us know how it goes.

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
On 1/13/2023 at 10:53 AM, creedon said:

I have updated my December 29, 2022 code post.

Let us know how it goes.

Hello, thank you very much for doing that. Have tried the updated code but still seem to be having the same issue.. don't know if there is something else that has been changed or maybe a mistake on my behalf?

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.