studiofounded Posted March 28, 2022 Share Posted March 28, 2022 Site URL: https://www.sisutemplates.com Hi! I'd like to switch the arrow buttons in 7.1 to a horizontal scroll bar. I believe you can do this by removing the overflow property, but I can't seem to get it to work. Any thoughts? A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 💻 Shop Squarespace Templates ✍️ Curated Business Resources 🥰 Complimentary Downloadables 🤍 Bespoke Branding & Websites Links in my posts may be affiliate links. Link to comment
Beyondspace Posted March 28, 2022 Share Posted March 28, 2022 2 hours ago, HannahRoseShaw said: Site URL: https://www.sisutemplates.com Hi! I'd like to switch the arrow buttons in 7.1 to a horizontal scroll bar. I believe you can do this by removing the overflow property, but I can't seem to get it to work. Any thoughts? Try adding to Home > Design > Custom Css #block-yui_3_17_2_1_1648471245721_18422 .summary-item-list { overflow-x: scroll; transform: translateX(0%) !important; /*Stop next click event*/ } #block-yui_3_17_2_1_1648471245721_18422 .summary-carousel-pager { visibility: hidden; } Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Beyondspace Posted March 28, 2022 Share Posted March 28, 2022 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
studiofounded Posted March 30, 2022 Author Share Posted March 30, 2022 On 3/28/2022 at 2:42 PM, bangank36 said: My testing Perfect, thank you! Is there a way to show the scroll bar from the outset? At the moment it only shows on scroll. A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 💻 Shop Squarespace Templates ✍️ Curated Business Resources 🥰 Complimentary Downloadables 🤍 Bespoke Branding & Websites Links in my posts may be affiliate links. Link to comment
iJizzy1 Posted August 16, 2022 Share Posted August 16, 2022 (edited) Hello @bangank36 , Is there a way to remove the scroll bar of the summary block ? @bangank36 And also, is there a way to apply your code only for mobile ? Site URL : https://brondyhumphrey.com/expansion-2 psw: pure Edited August 16, 2022 by iJizzy1 Missing info Link to comment
Desnoir Posted April 9 Share Posted April 9 Hi just hoping someone call help me with this code above and how you can then style the scrollbar? Thanks! Link to comment
tuanphan Posted April 13 Share Posted April 13 (edited) On 4/9/2024 at 12:59 PM, Desnoir said: Hi just hoping someone call help me with this code above and how you can then style the scrollbar? Thanks! If you share link to page where you use summary block, we can check easier Or try this CSS first /* width */ div.summary-v2-block::-webkit-scrollbar { width: 10px; } /* Track */ div.summary-v2-block::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ div.summary-v2-block::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ div.summary-v2-block::-webkit-scrollbar-thumb:hover { background: #555; } Edited April 13 by tuanphan 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
holahannah Posted June 21 Share Posted June 21 Hello, I'm trying to achieve something similar - having a horizontal scrollbar visible on my summary carousel block. I've added the code above (overflow-x: scroll) which gets the scrollbar to appear, however the styling that @tuanphan posted above doesn't seem to work. Is there a way to: 1. Style the scrollbar, so it's black and white, as per the screenshot attached 2. When you click the navigation arrows, can they scroll one item at a time. I don't want to hide the arrows, but when you click them, they don't scroll properly through the other tiles. My site is: https://beseensocials.squarespace.com/about password: bandit Many thanks 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