Advanced tab quetion

is there a practical way of placing the “red” heading there. I don’t want to add it to one of the tab-menu items because it is a general heading for all tabs, I don’t want to change.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Is this inside of a tab?
Components are ideal for this.

yes it should be inside of the “tab menu” but unfortunately Webflow doesn’t allow that, it only allows you to put it inside of a “tab menu item”, which would change on every click.

this a general heading, I don’t want to change acorss the 3 tabs

https://preview.webflow.com/preview/mohamads-sublime-site-455605?utm_medium=preview_link&utm_source=dashboard&utm_content=mohamads-sublime-site-455605&preview=87376000d0a73aa1c9036c41c6b4635a&workflow=preview

Ah I see, the entire screenshot is a tab element and the 3 lower items are tabs.
The tab component is pretty strict, so it doesn’t allow you to insert an element directly.

You’ve got some options that might work, involving custom JS and/or custom CSS, but they wouldn’t work well inside the designer due to the restricted element arrangement.

I’d approach this by building a custom tab experience using interactions. That way you get the exact WYSIWYG view you ideally want in the designer.

Here’s a demo of one interactions approach I used recently;

https://interaction-test-tabs.webflow.io/

I haven’t made it a cloneable, but here’s the readonly link so you can see how the interactions are built.

https://preview.webflow.com/preview/interaction-test-tabs?utm_medium=preview_link&utm_source=designer&utm_content=interaction-test-tabs&preview=4752469b14c775d1b7708740dd4cfb4d&workflow=preview

1 Like

thanks for replying. But if you don’t use the built-in Webflow tabs, how can you deal with the Current state. In the design as you can see the the small heading and column must have this gradient color when clicked.

Make it part of your interaction, either on hover or click.

1 Like