semigrownkid Posted September 27, 2022 Share Posted September 27, 2022 (edited) Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046 https://uxplaybook.org/ux-accelerator However, this code does not work Quote /* Text sticky */ @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1664264642296_1491046 { position: sticky; top: 200; position: -webkit-sticky; z-index: 999; }} Edited September 27, 2022 by semigrownkid Additional info Link to comment
ellyferguson0 Posted September 27, 2022 Share Posted September 27, 2022 (edited) 17 hours ago, tuanphan said: What is access password? Password2022 It's on the services page I also have an issue with mobile mode - no options are showing for navigation Edited September 28, 2022 by ellyferguson0 Link to comment
tuanphan Posted September 30, 2022 Share Posted September 30, 2022 On 9/27/2022 at 11:36 PM, semigrownkid said: Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046 https://uxplaybook.org/ux-accelerator However, this code does not work Your top value is invalid Use 200px not 200 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted September 30, 2022 Share Posted September 30, 2022 On 9/27/2022 at 8:21 AM, ellyferguson0 said: I'm really needing help with this. I upgraded the section of my sticky split accidentally to fluid. I obiously can't go back now. The sticky split no longer works. I had on the left sticky and on the right it scrolled What do i do? https://pece.squarespace.com/config/ Which text are you referring on Services page? Password2022 https://pece.squarespace.com/portfolio-1?noredirect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ellyferguson0 Posted September 30, 2022 Share Posted September 30, 2022 (edited) 39 minutes ago, tuanphan said: Which text are you referring on Services page? Password2022 https://pece.squarespace.com/portfolio-1?noredirect Just the section that is split so Our Services, Portfolios, Our clients - all sticky Right side from Electrical services down to infrastructure services - All scrolling Edited September 30, 2022 by ellyferguson0 Link to comment
tuanphan Posted October 1, 2022 Share Posted October 1, 2022 On 9/30/2022 at 10:21 AM, ellyferguson0 said: Just the section that is split so Our Services, Portfolios, Our clients - all sticky Right side from Electrical services down to infrastructure services - All scrolling Add to Design > Custom CSS @media screen and (min-width:768px) { .fe-block-6332330d942ae48776454e90 { position: sticky; position: -webkit-sticky; top: 10px; z-index: 9999; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
semigrownkid Posted October 1, 2022 Share Posted October 1, 2022 On 9/30/2022 at 9:41 AM, tuanphan said: Your top value is invalid Use 200px not 200 Awesome. How do I make the block stick until the footer? Intended purpose is to be used as a sub navigation Link to comment
tuanphan Posted October 2, 2022 Share Posted October 2, 2022 On 10/1/2022 at 3:34 PM, semigrownkid said: Awesome. How do I make the block stick until the footer? Intended purpose is to be used as a sub navigation Hi. No way. It will sticky in its section only. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ellyferguson0 Posted October 4, 2022 Share Posted October 4, 2022 On 10/1/2022 at 5:00 PM, tuanphan said: Add to Design > Custom CSS @media screen and (min-width:768px) { .fe-block-6332330d942ae48776454e90 { position: sticky; position: -webkit-sticky; top: 10px; z-index: 9999; } } no 😞 I also need the following blocks to stick (not just .fe-block-6332330d942ae48776454e90 ) .fe-block-6332330daa6efe870b10baac .fe-block-6332330d1b0dd326d60306d6 .fe-block-6332330d8d6c38fd59c05e5e .fe-block-6332330dffffcfe7d7cf4df2 .fe-block-6332330db553e9ec8dd3d62e Link to comment
adrianajaviera Posted October 10, 2022 Share Posted October 10, 2022 Hi @tuanphan I've read all the comments and tried all the codes but nothings seems to work when trying to get my text box sticky to the left of the page. Could you please help? Appreciate it! https://mouse-cow-w3ep.squarespace.com/services pssw: Danielle2022 Link to comment
tuanphan Posted October 12, 2022 Share Posted October 12, 2022 On 10/11/2022 at 5:02 AM, adrianajaviera said: Hi @tuanphan I've read all the comments and tried all the codes but nothings seems to work when trying to get my text box sticky to the left of the page. Could you please help? Appreciate it! https://mouse-cow-w3ep.squarespace.com/services pssw: Danielle2022 I don't see text on left. Can you take a screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Leanie Posted November 17, 2022 Share Posted November 17, 2022 (edited) @semigrownkid @tuanphan have you managed to figure this out? I have the same issue, trying to make the block in the screenshot sticky so it appears on the entire site as you scroll down. Tried the below code but it does not seem to work @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } Edited November 17, 2022 by Leanie additional information Link to comment
paul2009 Posted November 17, 2022 Share Posted November 17, 2022 8 minutes ago, Leanie said: Tried the below code but it does not seem to work Check the parent element. If it has an overflow property set or has no height set then the sticky element won't have any area to stick to when scrolling. About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Leanie Posted November 17, 2022 Share Posted November 17, 2022 3 minutes ago, paul2009 said: Check the parent element. If it has an overflow property set or has no height set then the sticky element won't have any area to stick to when scrolling. @paul2009 Thanks, I managed to get it to work, the only issue is that it's sticking to the left side of the site and I need it on the right with a bit of padding. Below is the code that ended up working to get it to this point @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 { position: fixed; top: 300; position: -webkit-sticky; z-index: 999; } } Link to comment
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 On 11/17/2022 at 6:26 PM, Leanie said: Thanks, I managed to get it to work, the only issue is that it's sticking to the left side of the site and I need it on the right with a bit of padding. Below is the code that ended up working to get it to this point @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1668681761990_18061 { position: fixed; top: 300; position: -webkit-sticky; z-index: 999; } } try adding right: 0; under top: 300; Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Leanie Posted November 21, 2022 Share Posted November 21, 2022 @tuanphan Thanks so much, that worked! Link to comment
v-web Posted December 29, 2022 Share Posted December 29, 2022 @tuanphan coming in here with the same question as everyone else - can't seem to get anything to work for this left hand sticky block that is contained in a full page column on this page https://www.verbier.com/ski-passes - on 7.0 Really grateful for any help Thanks Link to comment
creedon Posted December 29, 2022 Share Posted December 29, 2022 (edited) On 12/29/2022 at 1:28 AM, skiservice said: can't seem to get anything to work for this left hand sticky block that is contained in a full page column Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> @media only screen and ( min-width : 768px ) { .Main-content .sqs-layout > .sqs-row > .sqs-col-3 { position : sticky; top : 0; } } </style> Let us know how it goes. Edited January 12, 2023 by creedon version 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
v-web Posted December 30, 2022 Share Posted December 30, 2022 17 hours ago, creedon said: Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> .Main-content .sqs-layout > .sqs-row > .sqs-col-3 { position : sticky; top : 0; } </style> Let us know how it goes. Thank you so so much. Excellent, works perfectly creedon 1 Link to comment
dominyka94 Posted January 7, 2023 Share Posted January 7, 2023 Why does the side menu stick to the screen on Chrome but not on Safari? link Link to comment
creedon Posted January 7, 2023 Share Posted January 7, 2023 53 minutes ago, dominyka94 said: Why does the side menu stick to the screen on Chrome but not on Safari? Because on Chrome your CSS is set to use postition : fixed; and on Safari you use position : -webkit-sticky;, .fe-block.fe-block-yui_3_17_2_1_1668721104263_891689, .fe-block.fe-block-yui_3_17_2_1_1672921974881_2811875 { font-weight : 400; font-size : 14px; transition : all .3s; line-height : ; position : fixed; top : 300px; left : 15px; position : -webkit-sticky; z-index : 999; } I don't think you're going to be able to get the effect I think you want because of the way sticky works. For sticky to work its parent container has to be big enough for the element to stick within. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
azbd77j8 Posted January 8, 2023 Share Posted January 8, 2023 (edited) Hello, I am trying to create a sticky vertical navigation bar (basically trying to replicate this website exactly, see here). To do so, I opted to disable the horizontal navigation using CSS, and create sticky code block to fake a vertical nav bar (maybe this isn't the best way?) — I have a few questions. I used some of the code above and had some success, but the left nav bar isn't 100% sticky (if you scroll up or down, the left nav bar moves slightly). I am also trying to add a vertical line next to the bar (which I used via border-right on the code block), but the vertical line isn't 100% flush with the edges. 1. How can I make my nav bar 100% sticky? 2. How can I add a vertical line without white space on top or below? 3. Is there to keep apply this fake nav bar fixed to every page on my website? 4. In general, is there a better way to create a sticky vertical navigation bar? startstop.site (password: 123) Thanks! Edited January 8, 2023 by azbd77j8 Link to comment
v-web Posted January 12, 2023 Share Posted January 12, 2023 On 12/30/2022 at 3:44 PM, v-web said: Thank you so so much. Excellent, works perfectly Small question - on mobile if I want to make it (the menu) disappear behind the content or simply stay at the top is this possible? If not possible I would also be happy for the menu to just sit at the bottom of the page after all the content. https://www.verbier.com/ski-passes Thank you very much On 12/29/2022 at 10:29 PM, creedon said: Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> .Main-content .sqs-layout > .sqs-row > .sqs-col-3 { position : sticky; top : 0; } </style> Let us know how it goes. Link to comment
creedon Posted January 12, 2023 Share Posted January 12, 2023 6 hours ago, v-web said: on mobile if I want to make it (the menu) disappear behind the content or simply stay at the top is this possible? I have updated my December 29, 2022 code post. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
v-web Posted January 17, 2023 Share Posted January 17, 2023 On 1/13/2023 at 10:53 AM, creedon said: I have updated my December 29, 2022 code post. Let us know how it goes. Hello, thank you very much for doing that. Have tried the updated code but still seem to be having the same issue.. don't know if there is something else that has been changed or maybe a mistake on my behalf? 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