Gabe O'Leary Gabe O'Leary - 3 months ago 5x
CSS Question

Using a label within a bootstrap nav

I have a bootstrap nav:

enter image description here

The highlighted bit is currently a list element of the nav and as such, the color changes on hover over and it is meant to be used as a navigation action. I would like to instead use it as a static label, meant to show the user something about where they are in the application. I know that I can added the class 'disabled' to make it look 'less' clickable, but it still changes slightly on hover over, and displays a cursor other than the default.

I'm hoping to have it display as a simple centered label that doesn't appear to be clickable in any way.


Using pointer-events: none; on the label will disable the element from registering any mouse events, including hover effects and bypassing the issue you had with it.