Classic tabs

Support
#1

hi guys
Could you help us out here.
1.
I have set up a set of classic tabs, some of the tab heads run to 2 lines and some don’t, I want to know how to adjust the css to keep all tab heads backgrounds the full depth when one of the tabs goes to 2 lines
URL https://evidentli.com/

#2

Hi There,

The padding of nav tab item is too high, please reduce it by adding this custom CSS under Theme Options > CSS:

.x-nav-tabs>li>a {
    padding: 15px;
}

Hope it helps :slight_smile:

#3

Hi Support
That didn’t work, no change

#4

Hi There,

Thanks for your confirmation!
I can see the padding is already set to 15Px, so the only way is to make the text in one line. Please decrease the font size to make the text one line.

.x-nav-tabs>li>a {
font-size: 18px !important!
}

This CSS should work.

Thanks

#5

Hi guys
I didn’t want to decrease the text size but increase the tab background depth on the single line tabs so their backgrounds are the same depth as when you have a heading that is 2 lines deep. Sorry about the confusion

#6

Hi Phil,

Please try this code:

.x-nav-tabs > li {
    background-color: #f7f7f7;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.85);
}

.x-nav-tabs {
    display: flex;
}

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

.x-nav-tabs>.active, 
.x-nav-tabs>.active:hover {
    background-color: #dddddde6;
    border: 0;
}

Here are some related links of the suggestions above for further reading:

Hope this helps.

#7

Hi Jade
Thanks but look what happens when you go below 979 the vertical stacking does not apply so the are off the screen teh flex is not allowing it to happen, so I have applied

@media screen and (min-width: 979px)
{.x-nav-tabs {
display: flex;
}}
this has addressed that issue, next

how do I achieve the transparency with borders I don’t seem to be able to select that css correctly,
thanks Phil

#8

Hi Phil,

I assume you’re referring to the tab content because your tab title has already a semi-transparent background color. If so, please add this to your Page > CSS

.x-tab-content {
	border: 1px solid rgb(213, 184, 78);
    border-top: 1px solid rgb(213, 184, 78);
    background-color: rgba(255, 255, 255, 0.75);
}

Feel free to adjust those color values.

If you notice I have included the border-top rule, that is because the tab content has no border-top by default.

Hope it helps,
Cheers!

#9

Apologies guys, I was referring to the heads not the content of the tabs, I had this css in place which was achieving the look we were after
.x-nav-tabs>li {
float: left;
margin-bottom: 0;
border-right: 2px solid #ddd;
border-right: 2px solid rgba(0,0,0,0.15);
border-bottom: 0px solid #ddd;
border-bottom: 0px solid rgba(0,0,0,0.15);
text-align: center;
}

#10

Hi There,

To make the nav tabs transparent with border, please add this custom CSS also:

.x-nav-tabs>li {
    background: transparent;
    border: 2px solid #b3b3b3;
}

Let us know how it goes!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.