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.