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?