Henry-T-Rumble Posted July 14, 2023 Posted July 14, 2023 Hello, I've not been able to find this answer in the forums, so thanks for reading! I'd like to have a header for each of my portfolio pages, but I'd like this to be sticky like the navigation bar. I've put this in as a block of text on the page in the link to my website above "Still Life", but of course it scrolls with the page. I'm not sure if best to attach this to the header or as page content, the other issue is that there isn't a code section for individual portfolio pages as far as I can see. I have also mocked up how this should look as you scroll, with the title sitting over the images. Thanks in advance!
Ziggy Posted July 14, 2023 Posted July 14, 2023 Can you add the text "Still Life" to a text block at the top of the page and share the website URL and page? Henry-T-Rumble 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
Henry-T-Rumble Posted July 14, 2023 Author Posted July 14, 2023 Hi Ziggy, sorry I thought the website displayed automatically, you can view it here: https://www.henrytrumble.com/work/stilllife Ziggy 1
Ziggy Posted July 14, 2023 Posted July 14, 2023 No worries, it's not clear as a user when posting. Try this Custom CSS: section[data-section-id="64ab7a1cb6d6b96845f85691"] { min-height: 0 !important; position: sticky !important; -webkit-position: sticky !important; top: 0; z-index: 999; .section-border { opacity:0; } } This targets the specific section. Henry-T-Rumble 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
Henry-T-Rumble Posted July 15, 2023 Author Posted July 15, 2023 16 hours ago, Ziggy said: section[data-section-id="64ab7a1cb6d6b96845f85691"] { min-height: 0 !important; position: sticky !important; -webkit-position: sticky !important; top: 0; z-index: 999; .section-border { opacity:0; } } Amazing Ziggy, thanks so much! I assume I can roll this out over the other pages by creating and identifying the title blocks on the other other pages. Ziggy 1
Ziggy Posted July 17, 2023 Posted July 17, 2023 Yes, you can do exactly that. This is a good way to identify section/block IDs:https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71 tuanphan and Henry-T-Rumble 2 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
Henry-T-Rumble Posted August 1, 2023 Author Posted August 1, 2023 Ok, this is working beautifully! But it doesn't seem to work for mobile. As far as i can tell the ID is same for the text, but I don't understand the code well enough to figure the difference out. Any further help would be appreciated!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment