SaniceMarlow Posted February 15, 2022 Share Posted February 15, 2022 Site URL: https://marlow-concept-zach-naum.squarespace.com/optical-frames Hi there, I'm wondering if anyone can help me make a text block on the side of a page sticky? I have this block on the left side of the page which is functioning as a navigation bar with links to the text. I've styled the text block using CSS, and I would like to add CSS to make it sticky so that it stays in place as you scroll down the page. I've read quite a lot on how to do this (targeting the block then adding position: stick etc) but for some reason nothing I try seems to be working. Any help would be much appreciated! Link to comment
Beyondspace Posted February 18, 2022 Share Posted February 18, 2022 On 2/15/2022 at 2:15 PM, SaniceMarlow said: Site URL: https://marlow-concept-zach-naum.squarespace.com/optical-frames Hi there, I'm wondering if anyone can help me make a text block on the side of a page sticky? I have this block on the left side of the page which is functioning as a navigation bar with links to the text. I've styled the text block using CSS, and I would like to add CSS to make it sticky so that it stays in place as you scroll down the page. I've read quite a lot on how to do this (targeting the block then adding position: stick etc) but for some reason nothing I try seems to be working. Any help would be much appreciated! What is your site-wide password? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
SaniceMarlow Posted February 21, 2022 Author Share Posted February 21, 2022 On 2/19/2022 at 2:41 AM, bangank36 said: What is your site-wide password? Whoops! Password: Willow123 Link to comment
Beyondspace Posted February 21, 2022 Share Posted February 21, 2022 (edited) 12 hours ago, SaniceMarlow said: Whoops! Password: Willow123 You can try @media only screen and (min-width: 768px) { section[data-section-id="61dab313c56928309b50395b"] .sqs-layout > .row > .col:first-child { position: sticky; top: 200px; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you Edited February 21, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
SaniceMarlow Posted March 4, 2022 Author Share Posted March 4, 2022 Thank you @bangank36, that worked! Sorry to be a pain, but if I wanted to move this the text block to the exact opposite side of the screen (far right), what would the edit to the code be? Also, is there any way to have multiple stacked elements sticky in the same way? E.g. If I had a text block AND search block underneath. Thank you! Link to comment
tuanphan Posted March 6, 2022 Share Posted March 6, 2022 On 3/4/2022 at 12:21 PM, SaniceMarlow said: , that worked! Sorry to be a pain, but if I wanted to move this the text block to the exact opposite side of the screen (far right), what would the edit to the code be? Also, is there any way to have multiple stacked elements sticky in the same way? E.g. If I had a text block AND search block underneath. Thank you! Have you solved it yet? 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
SaniceMarlow Posted March 14, 2022 Author Share Posted March 14, 2022 On 3/6/2022 at 10:16 PM, tuanphan said: Have you solved it yet? Nope not yet. Link to comment
IXStudio Posted March 14, 2022 Share Posted March 14, 2022 Hi, Website is expired! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
SaniceMarlow Posted March 14, 2022 Author Share Posted March 14, 2022 17 hours ago, IXStudio said: Hi, Website is expired! Best, Leopold Just renewed it 🙂 Link to comment
tuanphan Posted March 15, 2022 Share Posted March 15, 2022 23 hours ago, SaniceMarlow said: Just renewed it 🙂 Add to Design > Custom CSS /* Sticky text */ @media screen and (min-width:768px) { div#page-section-61dab313c56928309b50395b .span-2 { position: sticky; position: -webkit-sticky; top: 200px; } } 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
SarahSWD Posted July 12, 2022 Share Posted July 12, 2022 (edited) Hi, @tuanphan & @bangank36 Exact same request but I couldn't make it work with the code options above using my block IDs.... Could you please help me with the right code to make the green text block sticky as you scroll along that section? > https://www.soldesignstudio.com/test Thanks, Sarah Edited July 12, 2022 by SarahSWD Link to comment
tuanphan Posted July 12, 2022 Share Posted July 12, 2022 2 hours ago, SarahSWD said: Hi, Exact same request but I couldn't make it work with the code options above using my block IDs.... Could you please help me with the right code to make the green text block sticky as you scroll along that section? > https://www.soldesignstudio.com/test Thanks, Sarah With Fluid Engine, the code will be easier Use this @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } SarahSWD 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
SarahSWD Posted July 12, 2022 Share Posted July 12, 2022 3 hours ago, tuanphan said: With Fluid Engine, the code will be easier Use this @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } Awesome, thanks @tuanphan. I thought there might be a slight difference on Fluid. It works just as I wanted. 🙂 Link to comment
RolandFuseHub Posted August 15, 2022 Share Posted August 15, 2022 (edited) On 7/12/2022 at 1:59 AM, tuanphan said: With Fluid Engine, the code will be easier Use this @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } Hi @tuanphan How would that work if you have a text block, button, accordion, etc on one side and want to stick all of them? See this page: https://devmods.squarespace.com/template-scooter (pw: sneakpeek) I could use @WillMyers solution as well but I got intrigued by your FE solution. Thanks, Roland Edited August 15, 2022 by RolandFuseHub I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
tuanphan Posted August 18, 2022 Share Posted August 18, 2022 On 8/16/2022 at 1:51 AM, RolandFuseHub said: Hi @tuanphan How would that work if you have a text block, button, accordion, etc on one side and want to stick all of them? See this page: https://devmods.squarespace.com/template-scooter (pw: sneakpeek) I could use @WillMyers solution as well but I got intrigued by your FE solution. Thanks, Roland I think you should move right image in separate section. Then you can use WillMyer Split section code & make left side sticky easier. Or you can set sticky for all blocks, & adjust top value something like this RolandFuseHub 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
KAC Posted August 18, 2022 Share Posted August 18, 2022 @tuanphan I'm having a similar issue, and the previous css doesn't seem to work. I'd like to make the green section at the top sticky. Right now, they're three separate text blocks, which may be part of the issue. Also, I wanted to make that text box multi-column so that it's all in one section, but I wasn't sure how to apply multi-column to just one text box. https://guacamoleairplane.com/supplier-guide-new (pw: newnew) Link to comment
tuanphan Posted August 18, 2022 Share Posted August 18, 2022 6 hours ago, KAC said: @tuanphan I'm having a similar issue, and the previous css doesn't seem to work. I'd like to make the green section at the top sticky. Right now, they're three separate text blocks, which may be part of the issue. Also, I wanted to make that text box multi-column so that it's all in one section, but I wasn't sure how to apply multi-column to just one text box. https://guacamoleairplane.com/supplier-guide-new (pw: newnew) Add to Design > Custom CSS @media screne and (min-width:641px) { div#block-yui_3_17_2_1_1660788670895_121786+.row { position: sticky; top: 140px; z-index: 99999; position: -webkit-sticky; } } 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
VelocityMarketingGroup Posted August 19, 2022 Share Posted August 19, 2022 I am ABSOLUTY confused. I am trying to do the same thing. There is no guild on how to actually embed the code. Iv add the code in the header, footer, the custom css and in the code block using css and html. nothing. what are you guys doing to make this work? what am i missing? Link to comment
creedon Posted August 20, 2022 Share Posted August 20, 2022 5 hours ago, VelocityMarketingGroup said: I am ABSOLUTY confused. The trick with sticky elements is that for something to be sticky it's parent element needs to be tall enough for the element you want to be stuck to stick in. If you don't have this relationship, then there is no way for position : sticky to work. If this is the relationship then no sticky is possible. If this is the relationship then a sticky is possible. This is an oversimplification of a somewhat complex CSS issue for those new to CSS. When the relationship is right then the sticky element floats within the parent based on a number of CSS property value pairs. I don't have a solution. If you want to read up on how sticky works there are many sources available on the web. paul2009 1 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
VelocityMarketingGroup Posted August 24, 2022 Share Posted August 24, 2022 I figured it out. I was wondering how people were adding the CSS code and making a block in fe stick. I have the CSS code for forums but what I needed to do was add the block id into the code. I was able to find the block ID per the extension provided by squarespace id finder. My next big adventure is to figure out how to add an opacity to an image... If you know how, that would be great information. Thanks, Link to comment
tuanphan Posted August 26, 2022 Share Posted August 26, 2022 On 8/24/2022 at 7:33 AM, VelocityMarketingGroup said: I figured it out. I was wondering how people were adding the CSS code and making a block in fe stick. I have the CSS code for forums but what I needed to do was add the block id into the code. I was able to find the block ID per the extension provided by squarespace id finder. My next big adventure is to figure out how to add an opacity to an image... If you know how, that would be great information. Thanks, Which image are you referring to? 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
themodelcoop Posted September 12, 2022 Share Posted September 12, 2022 I have the same isssue. I'd like to make the text box that has daniela pestova and menu items - portfolio, covers etc sticky. can you assist https://michael-terwindt-yk8j.squarespace.com/daniela-pestova-portfolio-1 Link to comment
tuanphan Posted September 17, 2022 Share Posted September 17, 2022 On 9/12/2022 at 3:37 PM, themodelcoop said: I have the same isssue. I'd like to make the text box that has daniela pestova and menu items - portfolio, covers etc sticky. can you assist https://michael-terwindt-yk8j.squarespace.com/daniela-pestova-portfolio-1 It looks like you figured it out? 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
ellyferguson0 Posted September 27, 2022 Share Posted September 27, 2022 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/ Link to comment
tuanphan Posted September 27, 2022 Share Posted September 27, 2022 7 hours ago, 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/ What is access password? 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