On my website, http://www.ronabenson.com, in the “Resume” section, I’d like to make the Tab Nav elements stand out more. (I’ve gotten feedback that they’re easy to miss, hence people will think I only have the “Screen” Tab [the default one] and not the other 2 tabs as well.) How do I change the styling of Tab Nav elements? For example the background color, font color, font-size, border, etc?

Also, if you happen to have any suggestions as to how I can style my Tab Navs to improve their visibility, I’m open to suggestions! 🙂 (But I totally understand if that’s out of the scope of the Forum’s support.)

Thank you for your help!

🙂 Rona

Please add the code below in the Customizer > Custom > CSS.

.x-nav-tabs>li>a {
color: brown;
background-color: yellow;
}

.x-nav-tabs > li > a:hover, .x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
color: white;
background: blue;
}

You can change the colors as per your needs.

Thanks.

Thank you for writing in!

To change the background color of Tab Navigation, simply use the following CSS:

/* Default State */
.x-nav-tabs>li>a {
   background: #fff;
}

/* Active State */
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
   background-color: #f0f0f0;
}

You can add the styling as per your requirements.

Hope this helps. 🙂

Thank you.

thank you

You will need to add some CSS code under Appearance -> Customize -> Custom -> CSS

.x-tab-content .x-tab-pane {
background-color: transparent;
}

.x-tab-content {
background-color: red;
}

Change “red” for whatever color you are looking for either in its short name or hex value.

thanks a lot!

.x-tab-content .x-tab-pane {
border: none;
}