[Rona BParticipant]

Hi –

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

[ChristianModerator]

Hey 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.

[Rona BParticipant]

Thank you!!!!!!

[ChristianModerator]

You’re welcome Rona.

[AlanParticipant]

hi that code only worked for the tab navigation, how about the tab container?
thanks

[ZeshanMember]

Hi Alan,

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.

[AlanParticipant]

that works only for the tab navigation right?
i need to color the background of the container box underneath.

thank you

[CousettMember]

Thanks for writing in!

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.

[AlanParticipant]

awesome that was exactly what i was looking for.
one little thing left:
there is a white line around the container box, how can i color this?

thanks a lot!

[CousettMember]

The container has a border by default, you can use the following CSS to disable the border color.

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

[AlanParticipant]

Hi
the following worked for the content tab box

.x-tab-content  {
border: none;
}
.x-nav-tabs {
border: none;
}

in case anyone else is wondering.

[CousettMember]

Glad you were able to figure it out. 🙂 Thanks for sharing the code for others. Have a nice day.

[AlanParticipant]

how do i change the font size in the tab nav?
thanks!

[CousettMember]

Try adding some CSS code under Appearance -> Customize -> Custom -> CSS

.x-nav-tabs>li>a {
font-size: 1.4rem;
}

Change 1.4rem to the larger value you would like.

[AlanParticipant]

awesome thx

[Author]

Posts