Streaming live at 10am (PST)

Make Tab menu items appear side-by-side in mobile portrait view

Hi there,

Is there any way to stop the Tab titles in the Tabs Widget from stacking on top of each other in the mobile view? It appears to be a Webflow default?

Not in Webflow.

But look at this, THIS is the rule that makes the tabs shift one under another:

http://vincent.polenordstudio.fr/snap//Developer_Tools_-_httpswebflow.comdesignsab_2015-01-22_17-19-46.jpg

So you can rewrite that rule in your CSS (custom code area) to overwrite it. Start with a display:inline-block and be sure to adjust the width of each tab (to 25% for example, for 4 tabs) so they fit one close to another.

1 Like

Hey thanks Vincent, very helpful, I will override the rule in the css. Cheers

1 Like

Hey guys, just wanted to mention that if you hard-set the inline-block style on your tab (make sure the style changes to blue), you may be able to get the effect you’re looking for. Take a peek at this demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb Click on the page titled “Horizontal Tab Menu” and view it in the mobile media query.

1 Like

Ha thanks I did stumble across that solution in the end

1 Like

Holy Cow it works!

http://vincent.polenordstudio.fr/snap//screencast_2015-01-23_09-58-59_0_edited.gif

5 Likes

Haha the look on your face is priceless! :slight_smile:

2 Likes