Jump to content

Creating a sticky section

Go to solution Solved by tuanphan,

Recommended Posts

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

Screen Shot 2022-01-20 at 1.06.14 PM.png

Link to comment
  • Solution

Add to Design > Custom CSS

[data-section-id="61e9beb2e17264507cf90665"] {
    position: fixed;
    left: 0;
    width: 100%;
    top: 46px;
    z-index: 99999;
    padding-top: 0px !important;
}

body article {
    margin-top: 90px;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

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. 

Link to comment
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;}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.