Keep active tab hover color...active

Support
#1

Hi!

My site is Fog.lamachineavapeur.ca

I would like to keep my hover color active when my tab is…active. I have read a few posts but can’t seem to get it done.

Help?

Thank you!

Nathalie :slight_smile:

#2

Hello Nathalie,

Thanks for posting in!

Are you referring to this tabbed content?

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-active .hero1,
.x-active .hero2,
.x-active .hero3,
.x-active .hero4,
.x-active .hero5,
.x-active .hero6{
    opacity: 1;
}

We would love to know if this has worked for you. Thank you.

#3

OMG! RueNel, you never disappoint.

This is great, thank you!

What about the regular tab hover? I would need to keep it active too…

Thank you!

Nathalie :slight_smile:

#4

Hey Nathalie,

I am not sure which one is the regular tab.
You may update the code and use this:

.x-active .hero1,
.x-active .hero2,
.x-active .hero3,
.x-active .hero4,
.x-active .hero5,
.x-active .hero6{
    opacity: 1;
}

.x-tabs-list li button:hover .hero1,
.x-tabs-list li button:hover .hero2,
.x-tabs-list li button:hover .hero3,
.x-tabs-list li button:hover .hero4,
.x-tabs-list li button:hover .hero5,
.x-tabs-list li button:hover .hero6{
    opacity: 1;
}

Hope this helps.

#5

Hi RueNel,

Nope! That’s not it.

I have added this CSS for all my hover colors on my buttons:
$el.x-tabs ul>li:first-of-type button {
background:#1d2731;
}
$el.x-tabs ul>li:first-of-type button: hover {
background:#1d2731;
}
$el.x-tabs ul>li:nth-child(2) button {
background:#1d2731;
}

$el.x-tabs ul>li:nth-child(2) button: hover {
background: #d9b310;
}
(etc.)

and i’m thinking this is where I should add “active”. However, I have played around with it and I can get the hover no problem, but it won’t stays active…

Think you might point me in the right direction?

Thanks!

Nathalie :slight_smile:

#6

Hey Nathalie,

Sorry for the confusion. Well, if that is the case, you will have to update your custom css and use this:

$el.x-tabs ul>li:first-of-type button {
	background:#1d2731;
}

$el.x-tabs ul>li:first-of-type button:hover,
$el.x-tabs ul>li:first-of-type .x-active:hover {
	background:#1d2731;
}

$el.x-tabs ul>li:nth-child(2) button {
	background:#1d2731;
}

$el.x-tabs ul>li:nth-child(2) button:hover,
$el.x-tabs ul>li:nth-child(2) .x-active:hover {
	background: #d9b310;
}

Hope this helps.

#7

Hi!

Thanks for the quick reply.

My hover works fine with the CSS I provided. My problem is that it won’t stay that color when active.

For example, “souterrain” is dark blue. When on hover, it turns yellow with my arrow at the bottom. When I click, my arrow stays yellow but my background goes back to dark blue. I need my active tab to stay the same color as the hover.

Right now, this is what it looks like when active…

Not sure I’m making myself clear! lol!

Thanks again for the quick reply, hopefully you can help me out!

Nat :slight_smile:

#8

Hi Nat,

Sorry, we are actually confused because we do not see the hover background-color effect on our end, and I think that is caching related.


Anyways to have the same hover background-color effect to the active tab, on your element CSS code above, please update this:

$el.x-tabs ul>li:nth-child(2) button:hover {
background: #d9b310;
}

To this:

$el.x-tabs ul>li:nth-child(2) button:hover,
$el.x-tabs ul>li:nth-child(2) button.x-active {
background: #d9b310;
}

Hope it helps,
Cheers!

#9

Hello Friech,

This is EXACTLY what I needed! you guys are amazing.

Thank you so much,

Nathalie :slight_smile:

#10

You’re welcome!
We’re glad we were able to help you out.

#11

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