Horizontal scroll bar for summary block

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?

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

My testing

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. 

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

Hi just hoping someone call help me with this code above and how you can then style the scrollbar? Thanks!

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;
}