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

Design help General
1

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,
Thanks!

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

3104×1970 1.7 MB
3104×1970 1.67 MB

2

Hey @sozanskid can you please post your read-only link for us to help you? http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573?u=waldo

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

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

     <style> 
    .classname {overflow-x: scroll; } 
    </style>

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.

Thanks,

Waldo

3

Hey @Waldo,
Thanks for the quick response. Here is my preview link:
https://preview.webflow.com/preview/dans-portfolio?preview=44c9d4f9296210d99e936310d5f50d6f

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,
Dan

3104×1970 250 KB

4

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:

1920×873 101 KB

 <style> 
    .tabs_projects_bar {overflow-x: scroll; } 
    </style>

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:

5

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.

3104×1978 412 KB
3104×1978 1.78 MB

6

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.

7

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

1024×1970 1.32 MB
3104×1970 1.43 MB
3104×1970 1.43 MB

8

@Waldo,
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:

<style>
@media (max-width: 479px) {
	.tabs_menu {
		position:relative;
		background-color: #ddd;
		height:3.5rem;
		width:100%;
		line-height:3.5rem;
		overflow-x:scroll;
		white-space:nowrap;
		padding:0;
		text-align:left;
	}

	.tabs_menu > a {
		display:inline-block;
		//overflow-y:visible;
		line-height:3.5rem;
		padding:0 2rem;
		//position:relative;
	}

	.tabs_menu > a.w--current {
		display:inline-block;
		//overflow-y:visible;
		line-height:3.5rem;
		padding:0 2rem;
		//position:relative;
		float:none;
	}
}
</style>

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

3 Likes
9

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:

2 Likes
10

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