Tabs horizontal scroll on mobile

[TomH]

TomH

February 24, 2025 at 8:14 am

Hi, the standard mobile views of Kadence tabs are not very user friendly, and don’t look good.

I am trying to turn it into a horizontal scrolliung tab, which I see a lot now, and is very functional.

I have this code and am testing it with 5 tabs and their icons, but the left side of the tabs bar is clipping off for some reason. Maybe you can help?

@media screen and (max-width: 767px) {
.kt-tabs-wrap .kt-tabs-title-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
padding-left: 0;
margin-left: 0;
}

.kt-tabs-wrap .kt-tabs-title-list::-webkit-scrollbar {
display: none;
}

.kt-tabs-wrap .kt-title-item {
flex: 0 0 auto;
white-space: nowrap;
}

.kt-tabs-wrap {
overflow: visible;
position: relative;
}
}