How can I set the headers of the "Tabs" element to position sticky?

Ask us anything How do I?
1

Hi all,

Quick question : I am trying to set the headers of the tabs element to sticky, however when I apply this position by selecting the headers one by one, and set the top to 0px, it doesn’t work. I cannot target their container as I don’t find any in the layout section of the editor.

Any idea on how I could achieve this?

Thanks a lot in advance.
Will

2

You can target the tabs container with custom css.
To preview these changes in the editor, you can put your style in an HTML Embed.
Something like that worked for me:

<style>
.tabs-object .tabs-container[data-v-077c1ff4] {
    position: sticky; 
    top: 0;
}
</style>

The data-* is probably specific to my component, but you can modify it with your own if you look at the Inspector panel or… you can just go with an !important statement…

<style>
.tabs-object .tabs-container {
    position: sticky !important; 
    top: 0;
}
</style>
3

Hi @jptrinh, thank you very much for your help.
FYI, the data-* on my side contained the same string.

I put an HTML Embed as you suggested but something weird is happening.
When I copy paste your code in the CSS section and exit the HTML Embed to go to preview, the CSS code is partially erased as you can see in the picture below :

Capture d’écran 2024-06-03 à 12.09.39

I tried many times to copy paste it, refreshed the page, etc. But each time I come back to the HTML Embed, the code looks like the capture above.

Do you have any clue as to what is happening here? A bug? Or am I doing something wrong?

Thanks again for your precious help.
Will

4

That should look something like this. You need to write the code inside the HTML specific input.
CleanShot 2024-06-03 at 12.42.59

5

@jptrinh thank you, I pasted it in the HTML specific input. I see no change in the editor and I cannot try it on the live site yet because my plan prevents me from publishing it since I enabled roles. I’ll come back to this thread later, when I can publish it. Thank you again for your help.

Best,
Will

6

You can add other properties like background-color: red to see if it’s working or not, and to debug :slight_smile:
I think you should see the result directly in the editor without having to publish.

1 Like
7

@jptrinh It worked! I forgot to change the overflow of the section the header is in to unset (it was set to hidden), I am so dumb. Thank you again, I marked your initial reply as the solution.

1 Like