Streaming live at 10am (PST)

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


#1

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?


#2

Not in Webflow.

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

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.


#3

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


#4

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.


#5

Ha thanks I did stumble across that solution in the end


#6

Holy Cow it works!


#7

Haha the look on your face is priceless! smile


#8