Is there a way to order or prioritise stylings? Nav Bar hover issue

[TEMPEST_114]

I have a nav bar that is using the ‘nav-bar li a’ Bootstrap class to do a hover highlight.

I also have the active page link formatted with the Bootstrap ‘active’ class.

When I’m on a page it looks like this:

When I hover over another page I get the correct effect here:

However, if I hover over the page I’m currently on, the active style is applied first and then the line item a is then applied, causing the current page title to turn to the hover colour i.e. invisible.

How can I stop this from happening, other than creating a 3rd colour for the ‘hover’ effect.

[TEMPEST_114]

Is there a way to have a custom hover on the ‘active’ link only? So that it’s a different hover style to a non-active link?

[TEMPEST_114]

SOLVED:

Add a custom class for the Bootstrap 5 class .nav-link.active and use the gui to style the ‘hover’ state.