Tabs flex layout

This is hopefully really dumb … but I can’t figure out how to make the tab headers flex-responsive when they on mobile.

What I’d like to do is use the Tabs Layout, but instead of have a slider if there are multiple tab headers on mobile, have the individual headers stack on top of each other. Is that doable with the current Tabs layout and I’m just missing how to do that?

I guess is there a way to change the tab headers from “row” to “column” flex that I’m not seeing?

Hey @cranetrain!

The following CSS will do the trick! Just head to Data > Edit Content JS + CSS and paste this in.

@media only screen and (max-width: 600px) {

    .builder-tabs-wrap{

        flex-direction: column!important;

    }

}
1 Like

That was incredibly helpful! Thanks so much for that.

A follow up question is that when I take change the background color of the tab headers so they look more like a button, then the “Active Tab” settings don’t seem to apply. Is there a simple fix for that as well?

For example, the default “active tab” color is gray which shows up if the background color of the text is clear

But not if the background has a color

Is there an easy fix for this as well?

I recall that there’s a trick to getting this to work… can you grab the link to this block (right-click and choose “Copy link to block” in the Editor) and reply with it? I will take a look :technologist:

1 Like

Thanks so much! Think that this is it here

Here’s the CSS I added to the page:

.builder-tab-wrap{

    background-color: #6fa384;

} 

.builder-tab-active{

    background-color: #1A5632!important ;

}

Feel free to change the colors up from here, but you now have control over the active vs standard colors :slight_smile:

1 Like

You’re amazing! Thanks so much.

Hi Logan,

Follow up on this, is it possible to include liquid inside the tab layout?

What I’d like to have is each tab pull up a different set of blog articles from Shopify based on their tags.

  • Tab 1 → blogs articles with “tag1”
  • Tab 2 → blog articles with “tag2”

I thought that this would be pretty straightforward using the tabs and some liquid code, but none of the liquid seems to work when it is in the tab structure.

Any advice/thoughts on this?

Hi @cranetrain, would you mind recreating this on a content entry / page somewhere so I can see it in action? I’ll just need the link to the content.

Thanks!

1 Like