Editing Appearance of Tabs Using CSS Hero and Beaver Builder


I am trying to use CSS Hero to isolate and edit the tabs I have appearing on this page but there are two groups of tabs. One horizontal group up top and a vertical group down below.


Using CSS Hero I was able to isolate the tab appearance however, I want to further isolate the top section of tabs from my other section and have them styled very differently.

I tried adding the following string to CSS Hero but it still won’t isolate the vertically stacked tabs below…

.fl-builder-content .fl-node-550b2d73d7865 .fl-module .fl-module-tabs

Any ideas?

I am trying to accomplish tabbed sections similar to this site:


The horizontal tabs at the top are fine, but I’d like to accomplish the bulkier horizontal tabs with the description below the title as shown on the example site… Any easy solutions for this?

Hi Carl! You can use the following CSS selectors to target either the horizontal or vertical tabs:

.fl-builder-content .fl-module-tabs .fl-tabs-horizontal


.fl-builder-content .fl-module-tabs .fl-tabs-vertical

You’ll have to forgive me as I am not exactly sure how to apply those selector using CSS hero, but hopefully this will get you started. Let me know if this helps! Thanks!

Hi Robby,

Thank you your reply, I figured that out but the problem is I have two sets of tabs on the same page (one horizontal one vertical). I can’t seem to isolate one set from the other as I want them styled differently if that makes sense.

The horizontal tabs will have the .fl-tabs-horizontal class and the vertical set will have a .fl-tabs-vertical. I am afraid I am not familiar enough with CSS Hero to explain how to target those class names, but that’s what you’re going to need to do. It’s possible that this might require writing some vanilla CSS. If you can provide me with a temporary admin login to you site, I would be happy to jump in and experiment with CSS Hero to see if we can get it working…