Add fade to let users know that content is horizontally scrollable on mobile

[emile]

Hi team,

Today I added breadcrumbs to a website I’ve been building for a client. The element looks and works very well. The breadcrumbs often don’t fit entirely when viewed on a SM or XS screen size, which is totally normal. I activated the “Content Scrolling” option in the header settings for this bar. It works great!

I would like the overflowing text to fade out towards the edge to let users know that the content is scrollable. I’ve seen this on other websites and it works well. I was wondering if you had a solution for Pro since Content Scrolling is a native option.

Thanks a lot!

Emile

p.s. I found this JS solution but I haven’t been able to get the shadow without the icon hint

[paul.r]

Hi Emile,

Thanks for writing in!

To make scroll obvious and visible in mobile, you can add this in Theme Options > CSS

@media(max-width:480px) {
.ps__rail-x {
    opacity:1 !important;
}
}

Hope that helps.

[emile]

Hey Paul,

Thanks for the quick reply.
Your solution does make the scroll obvious but isn’t quite what I’m looking for.

Below is a visual example of what I want to achieve.
Some kind of gradient or shadow over the overflowing text. No visible scrollbar.

Thanks!

Emile

[rad]

Hi @emile,

Unfortunately, there is no available option for that as of now. I tried but it’s not working with the linear gradient, which is also may not work on other browsers. I recommend using a transparent gradient image overlaying on it, and with that, you may wish to contact a developer.

Thanks!