[BruceParticipant]

Hi there support…
I have a question in relation to this thread: https://community.theme.co/forums/topic/transparent-tabs-tab-nav/

I have achieved this look with the css below provided from the above example:

/* Styling Added to remove Tabs border */

.page-id-15765 .x-nav-tabs,
.page-id-15765 .x-tab-content {
   background: none !important;
   border: none !important;
   color: #f0f0f0;

}
.page-id-15765 .x-nav-tabs {
	text-align: center;
}

.page-id-15765 .x-nav-tabs > li {
        float: none;
        text-align: center;
	display: inline-block;
	width: auto !important;
}

.page-id-15765 .x-nav-tabs > .active > a {
	text-decoration: underline;
	padding: 0.75em 1em 0.95em;
        color: #23C5AE;
}

.x-nav-tabs > li > a, .x-nav-tabs > li > a:hover {
        background: none !important;  
        border: none !important;

I have a few extra thing I would like to do, but just can’t seem to get the css right.

1. I am placing the tabs over a background image, so I would like to change both tab and body font colour to #f0f0f0, (I have achieved the body, but just cant work out the right css for tab text).
2. I would like to remove the side borders from the nav tabs, BUT would like a top and bottom border (if possible).
3. I would like to be able to spread the tab apart more, just so it doesn’t look so crowded.

Note:
– The site is http://pressedpear.com, has a maintenance page up at the moment, so no examples are visible.
– I have included #23C5AE as the active text decoration hover colour.
– Attached is a screenshot of what is acceived so far.
– Here is an example of a site with a similar effect I am trying to achieve: http://www.crucecreativo.com/nosotros

Hope this is enough to go on.

Cheers,

[DarshanaModerator]

Hi there,

Thanks for writing in! I’m sorry but your site is under construction mode. Could you please provide us a way to access your site, so that we can take a closer look and assist you further.

Also we have a size limitation on attachments in the forum (512KB), you can resize your image and reattach or else use an online tool to share it (http://prntscr.com/).

Thanks!

[BruceParticipant]

Sorry bout that.
here is the link for screenshot: http://prntscr.com/8vs82h

[ChristopherModerator]

Hi there.

I would like to heck your site but it’s under construction mode, please provide us with login credentials.

Thanks.

[BruceParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thank you and we’re glad you like our demo!

1.) For tab font color, please use the following CSS:

.page-id-15677 #x-section-4 .x-nav-tabs>li>a, .x-nav-tabs>li>a:hover{
    color: #f0f0f0;
    padding: .75em 3em;  /*For number 3 to spread the tab. Increase 3em to adjust spacing*/
}

2.)

.x-nav-tabs>li {
   border: none;
   border-top: 1px solid rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);
}

Please change this:
.page-id-15677 .x-nav-tabs>.active>a {
text-decoration: underline;
padding: .75em 1em .95em;
color: #23c5ae;
}
to this:

.page-id-15677 #x-section-4 .x-nav-tabs>li.active>a, .x-nav-tabs>li.active>a:hover
    text-decoration: underline;
    color: #23c5ae;
}

Hope this helps.

[BruceParticipant]

Excellent!
All good except for one thing…
Where you mentioned to add this:

.page-id-15677 #x-section-4 .x-nav-tabs>li.active>a, .x-nav-tabs>li.active>a:hover
    text-decoration: underline;
    color: #23c5ae;

I got this white bar in the tab nav: http://prntscr.com/8vsomo
no underline and colour change on hover.

Your thoughts on getting the tab nav text underlined & changed to #23c5ae on hover?

[FriechModerator]

Hi There,

It was under Custom CSS on the Customizer. Actually that code is missing the opening bracket ({) sorry about that. The code should be:

.page-id-15677 #x-section-4 .x-nav-tabs>li.active>a, .x-nav-tabs>li.active>a:hover {
    text-decoration: underline;
    color: #23c5ae;
}

For the hover color; you can add this under Custom > CSS in the Customizer.

body .x-nav-tabs li:hover a {
	color: green !important;
}

Hope it helps, Cheers!

[BruceParticipant]

That fixed it!
Here is a screenshot – http://prntscr.com/8vunl6

Thanks again for your assistance on this one Darshana, Christopher, Lely, Friech.

keep up the great work guys.

[ThaiModerator]

You’re most welcome 🙂

If you need anything else, please let us know.

[BruceParticipant]

Hey there,
I have come across a bit of a prob with the white text on the tabs.
Have used the above css, – everything was working fine, but it now seems to have reverted back to global colours.
Not sure what happened, or what I did???

here is a screen shot with tab text, they should be white > http://prntscr.com/8y1olo

here is the complete css used for reference:

/* 
//Styling Added to modify tabs
 */

.page-id-15677 .x-nav-tabs,
.page-id-15677 .x-tab-content {
   background: none !important;
   border: none !important;
   color: #f0f0f0;
}
.page-id-15677 #x-section-4 .x-nav-tabs>li>a, .x-nav-tabs>li>a:hover{
    color: #f0f0f0;
    padding: .75em 10em;  
/*For number 10 to spread the tab. Increase 10em to adjust spacing*/
}
.page-id-15677 .x-nav-tabs > li {
        float: none;
        text-align: center;
	display: inline-block;
}
.page-id-15677 #x-section-4 .x-nav-tabs>li.active>a, .x-nav-tabs>li.active>a:hover {
    text-decoration: underline;
    color: #02aed6;
}
body .x-nav-tabs li:hover a {
	color: #02aed6 !important;
}
.x-nav-tabs > li > a, .x-nav-tabs > li > a:hover {
        background: none !important;  
        border: none !important;
}
.x-nav-tabs>li {
   border: none;
   border-top: 1px solid rgba(240,240,240,.8);
    border-bottom: 1px solid rgba(240,240,240,.8);
}

====
As I said: The .x-nav-tabs should be: color: #f0f0f0;
but they are not.
The hover colour is fine though, here is a screen shot when hovering over tab text >http://prntscr.com/8y1rra

How to fix please?

===
Also, second question: How would I make the .x-nav-tabs text font size bigger to match the body font size of my site? (using 16px at the moment)
(log in details in next post)

Thanks in advance.

[BruceParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating. It seems you have defined the color twice and both the colors are dark.

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
  background-color: #fff;
  color: #333;
  cursor: default;
}

.x-nav-tabs > li > a {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.325);
  font-size: 14px;
  line-height: 1.3;
  padding: 0.75em;
}

Please don’t use several CSS property for the same class to avoid conflict.

To set color of the Tabs –

.x-nav-tabs > li > a {
  color: #fff;
}

For hover –

x-nav-tabs > li > a:hover, .x-nav-tabs > .active > a:hover {
  color: #f54;
}

Let’s remove the color from other declaration and use this carefully.

Hope this helps.

Cheers!

[BruceParticipant]

I see what you mean – Your solution worked fine.
Thanks for that.

As for the second part of the question:
How would I make the .x-nav-tabs text font size bigger to match the body font size of my site? (using 16px at the moment)

Your thoughts?

[RadModerator]

Hi there,

You can add it’s font size along with the color, like this :

.x-nav-tabs > li > a {
  color: #fff;
  font-size: 16px;
}

Thanks.

[Author]

Posts