bmor567 Posted January 20, 2022 Share Posted January 20, 2022 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 Link to comment
Solution tuanphan Posted January 21, 2022 Solution Share Posted January 21, 2022 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
KAC Posted May 18, 2022 Share Posted May 18, 2022 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
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 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
Romer Posted June 7, 2022 Share Posted June 7, 2022 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 Posted June 11, 2022 Share Posted June 11, 2022 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; } } Romer 1 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
Romer Posted June 12, 2022 Share Posted June 12, 2022 Thanks @tuanphan. I tried this before, i must of entered the code incorrectly. Link to comment
sekan Posted March 27 Share Posted March 27 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 Link to comment
tuanphan Posted March 30 Share Posted March 30 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? 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
nic123 Posted October 1 Share Posted October 1 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 Link to comment
RahRah Posted October 31 Share Posted October 31 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? Link to comment
tuanphan Posted November 3 Share Posted November 3 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? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment