Tabs are an area where Avada needs to start over and add a lot of enhancements. Unfortunately, I suspect it would take an entire release cycle dedicated to tabs to be feature complete. Fortunately, with some custom CSS, it is possible to modify the behavior and appearance. Here is an example I put other emulating a tabbed interface I had seen elsewhere. It’s not exactly like the one I saw, but it’s close. The tabs are place within a 1/1 column with a background color (white) and a box shadow — 20px, 0, 22, -22, rgba(0,0,0,0.4).

Note: There is an accessibility error in the tabs and a bug has been reported. Tabs are not keyboard accessible due to a tabindex of -1 on the inactive tabs. Either the necessary JavaScript is broken or not included.

The CSS is fairly straightforward. I created a class called box-tab and assigned it to this example.

Copy to Clipboard