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

**URL:** <https://community.weweb.io/t/how-can-i-set-the-headers-of-the-tabs-element-to-position-sticky/8916>\
**Category:** How do I?\
**Tags:** design\
**Created:** [June 1, 2024, 9:01pm UTC](https://community.weweb.io/t/how-can-i-set-the-headers-of-the-tabs-element-to-position-sticky/8916 "2024-06-01T21:01:37Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [June 3, 2024, 9:39am UTC](https://community.weweb.io/t/how-can-i-set-the-headers-of-the-tabs-element-to-position-sticky/8916/2 "2024-06-03T09:39:45Z")

</div>

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:

```auto
<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…

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

```

---

_[View the full topic](https://community.weweb.io/t/how-can-i-set-the-headers-of-the-tabs-element-to-position-sticky/8916)._