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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment