Streaming live at 10am (PST)

Horizontal Scroll (Overflow-x) for Tab Component (Mobile)


Hey there,
Relatively new to Webflow... Love it so far, but am looking for some assistance with setting up a horizontal scroll bar for the Tab Component on the mobile breakpoint as I don't want to stack the tabs on mobile.

I saw other topics related to this but none of them seemed to be resolved.
Please advise,

Note: As you can see in the attached images I have the vertical scroll working but again Im looking for it to be horizontal...

Horizontal Scroll for Tab Menu on Mobile

Hey @sozanskid can you please post your read-only link for us to help you?

I believe that you just need to add in a tiny line of custom css to get the x-overflow scrolling. :smile:

So you would just remove the overflow selection, go to the custom code section, and add in:

    .classname {overflow-x: scroll; } 

Just make sure all of your links in that little bar are set to float left, and clear: none. :wink:

Let me know if you have any questions please.




Hey @Waldo,
Thanks for the quick response. Here is my preview link:

Just to confirm, am I adding that line in the custom code section in my dashboard as in the attached image?
Thanks again for your support,


Hey @sozanskid this should do the trick, just add it on the page level custom code unless you have this project piece as a symbol:

    .tabs_projects_bar {overflow-x: scroll; } 

Let me know if you have any questions or need any help. You're the first person I've seen using REM units in webflow! Nice work :smiley:


Hey @Waldo,
Thanks for the reply, but unfortunately I am still unable to make it work... Is there something wrong with my positioning or display styling? or maybe my width values? I cant seem to get it to work :frowning:
Thanks again for your support.


Try removing padding from tabs. Give them a height & width, and make the line height of the tab font the same as the height of the tab.


I followed all of those suggestions but I'm still experiencing the same results.


I believe I have figured it out... Definitely not the most pretty solution but it seems to be working for me so, I'm gonna go with it. Took me a few hours (as I'm certainly not an expert web dev.)

Here was my custom code solution:

@media (max-width: 479px) {
	.tabs_menu {
		background-color: #ddd;

	.tabs_menu > a {
		padding:0 2rem;

	.tabs_menu > a.w--current {
		padding:0 2rem;

Hope this helps others who experience this issue in the future :smile:


Ahhh it was that whitespace no wrap! Great job @sozanskid :smile: glad you were able to find a solution and thank you for sharing it :smile:

closed #10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.