Creating a sticky section

Site URL: https://www.descoverhome.com

I am trying to create a navigation bar that sticks below the header when scrolling on both mobile and desktop.

I've found a workaround that uses the announcement bar and switching the location to below the logo header, but I'd still like to use the announcement bar for actual announcements.

I've attached an image. I'd like this whole section to be fixed to the top at all times to allow for easy navigation around the site.

Thanks in advance for your help!

pw: 123456

Hi @tuanphan! I've seen several of your code suggestions for making text sections sticky, but I can't figure out why none are working for me. 

I'm trying to make a Text Block sticky. It's the green block (3 neighboring text blocks) on this page. (password: newnew) https://guacamoleairplane.com/supplier-guide-new

I plan to link each category in that green block to a header using anchor links — I've already started with the first three. 

On 5/18/2022 at 9:03 AM, KAC said:

Hi @tuanphan! I've seen several of your code suggestions for making text sections sticky, but I can't figure out why none are working for me. 

I'm trying to make a Text Block sticky. It's the green block (3 neighboring text blocks) on this page. (password: newnew) https://guacamoleairplane.com/supplier-guide-new

I plan to link each category in that green block to a header using anchor links — I've already started with the first three. 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1652837189867_324098 {
    position: sticky;
    top: 110px;
    position: -webkit-sticky;
    z-index: 99;
}
div#block-yui_3_17_2_1_1649637551897_5445, div#block-yui_3_17_2_1_1652827450236_29361 {
     position: sticky;
    top: 110px;
    position: -webkit-sticky;
    z-index: 999;
    background-color:white;
    width: 150px;
}
div#block-yui_3_17_2_1_1652827450236_29361 {z-index:9999;}
}

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 4:16 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 😄

You can wrap code with desktop query

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

Thanks @tuanphan. I tried this before, i must of entered the code incorrectly. 

Hi @tuanphan thanks for being the don. Just wondering if you could get this to work for the section over here at the top which says Sekan Projects Info:

https://www.jiwajiwa.com/sekan/photography/indonesia

On 3/27/2023 at 1:00 PM, sekan said:

Hi @tuanphan thanks for being the don. Just wondering if you could get this to work for the section over here at the top which says Sekan Projects Info:

https://www.jiwajiwa.com/sekan/photography/indonesia

Hi,

This section?

This question is a variation of the above. I have Squarespace 7.1.  I am trying to create a Sticky Bar button under the header that pops out a Table of Contents with links that lead to different parts of the text in a very long page. I would like the same for both desktop and mobile features. The colors can be black and white. Can you help me with this? Thank you!

This is the example of what I'd like: https://www.mainlinedivorcemediator.com/what-is-divorce-mediation

I'm looking to do a similar thing - ideally something like this: https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/#demo

but I'd like the nav on the left hand side with a transparent background

Is it possible to do this using a section and anchor links?

On 11/1/2023 at 3:39 AM, RahRah said:

I'm looking to do a similar thing - ideally something like this: https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/#demo

but I'd like the nav on the left hand side with a transparent background

Is it possible to do this using a section and anchor links?

Yes. Possible. But do this for a regular page or for all blog posts or?

Hi there,

I'm trying to make section[data-section-id="6616afa9f3ea0b7bba607952"] in this page sticky but only when you scroll down to the point of that section, and then it continues with the user after that point. As it stands, it begins at the top and then disappears at the point I want it to begin at. Can anyone help? This is my CSS:
 

[data-section-id="6616afa9f3ea0b7bba607952"]  {
   position: fixed;
  top: 160px
}

https://www.sashacoalition.org/green-hydrogen-factsheets-1

On 4/10/2024 at 10:38 PM, DoppyG said:

Hi there,

I'm trying to make section[data-section-id="6616afa9f3ea0b7bba607952"] in this page sticky but only when you scroll down to the point of that section, and then it continues with the user after that point. As it stands, it begins at the top and then disappears at the point I want it to begin at. Can anyone help? This is my CSS:
 

[data-section-id="6616afa9f3ea0b7bba607952"]  {
   position: fixed;
  top: 160px
}

 

https://www.sashacoalition.org/green-hydrogen-factsheets-1

You need to set z-index

[data-section-id="6616afa9f3ea0b7bba607952"]  {
   position: fixed;
  top: 160px;
    z-index: 123456789 !important;
}