Hi Team,

One of my content blocks contains a row with 12 horizontal Tabs. This means that Tabs on the right overflow on any screen under 1140px.

On mobile and tablets you can touch the tabs and a “scroll bar” appears allowing you to scroll to the right. The scroll bar then immediately fades away again. I need to find a way (preferably using CSS) to make the scroll bar permanently visible on all devices.

I’ve tried, unsuccessfully, to force the scroll bar to remain visible using the following CSS:

.x-tabs-list {
overflow-x: scroll !important;

Additionally, when viewing the tabs on a small PC screen the only way to scroll is to click one of the tabs and then use the ‘right’ and ‘left’ arrow keys on the keyboard.

This is what “inspector” shows me:

I’ve looked everywhere in the support forums and also via google and not been able to find a solution. Any help would be much appreciated.

Thanks,

Oliver

Hello Oliver,

You have posted a quite very detailed post information. To resolve your issue, perhaps this link could help you:

This code might help:

.x-tabs-list::-webkit-scrollbar {
    -webkit-appearance: none;
.x-tabs-list::-webkit-scrollbar:vertical {
    width: 11px;
.x-tabs-list::-webkit-scrollbar:horizontal {
    height: 11px;
.x-tabs-list::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.
Cheers.
          
Hi RueNel,
Thank you very much for your reply.  I was able to incorporate a fully functioning and responsive horizontal scroll bar that was permanently visible from the code you included!  Thanks for being a huge time saver!
Cheers,
Oliver