Can anyone help with with some CSS: F3 Button badge

[TemplateRepo]

I’m trying to make the badge applied to a button in the navbar to change colour, not just when the badge is hovered, but also when the button it’s connected to is hovered.

Example: https://casaelanatorrox.com (presently in development)

If you look at the last item in the menu, the “Availability” button, you’ll see a badge applied to it. When you hover the button, the button changes colour. I’m trying to get the badge also to change colour when the button is hovered.

I’ve used the CSS below, and it’s working when the badge is hovered but not the button.

.badge:hover {
background: #0895CB !important;
}

I’ve tried add a class to the button and applying the CSS that way, but failed to get it to work. Any clever people out there able or help?

@elixirgraphics I’ve added this to Github as a request, also to have the ability to change the badge colour when the page it’s linked to is active. I’ve done this on the site above using CSS, but it’d cool to have it as a feature.

[elixirgraphics]

You need to have the CSS check for hover on the button, not the badge.

This is an example, not necessarily the solution, as I’m on phone and can’t check it right now:

.btn:hover .badge {
   your styling here
}

[TemplateRepo]

Brilliant, works a treat. Thanks

I almost got there, but was applying :hover to the wrong element in the class.

Many thanks.

EDIT: For anyone else wanting to do this, full details below…

First choose the class name for this code, I’ve used button-badge-hover, then add this to the site or page wide code…

.button-badge-hover:hover .badge {
   background: #0895CB !important;
}

Adjust the colour code accordingly.

Finally, add the class button-badge-hover to the button you want the effect applied to…

And that’s you sorted!

Oh ya, if you want to change the colour of the badge on the page linked to, when it’s the active page, add this code to the page CSS box…

.badge {
	background: #0895CB !important;
}

Everything should now work as expected, with a cool badge colour change on hover