Published on Feb 2, 2021

Styling and Mobile Accordion for Oxygen Tabs

Sridhar Katakam

This members-only tutorial provides the steps to style the output of Tabs component of Oxygen so it looks better (like actual tabs).

Before:

After:

We shall also implement Turning Oxygen’s Tabs into Accordion for Mobiles tutorial to make the tabs collapse into an accordion at 767px and below.

Step 1

In the Oxygen editor, add a Tabs component.

Wrap the Tabs and Tabs Contents elements inside a Div.

Assign a class of say, oxy-tabs-container to this div.

Step 2

At Manage > Stylesheets, create a new Stylesheet named say tabs and paste the following CSS code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right