Bootstrap 5 underline navbar menu item-CodePudding

I am attempting to get the current selected menu within a navbar to be underlined however it isn't working.

My code:

.navbar-nav .nav-item:focus .nav-link {
    text-decoration: underline;
    background-color: yellow;
}

It seems quite common to have the selected menu link underline or highlighted in some way but I cannot figure out how to achieve this with Bootstrap 5.

CodePudding user response：

You should apply pesudo class :focus on .nav-link element

.navbar-nav .nav-item .nav-link:focus {
    text-decoration: underline;
    background-color: yellow;
}

CodePudding user response：

The reason that your css doesn't affect is because .nav-item never get focused..

If you want it to get focused use tabindex.

Else, change it to .nav-link:focus {text-decoration: underline;} (you don't need even !important for that).

CodePudding user response：

Try to override the 'active' class:

.navbar-nav .active { text-decoration: underline; background-color: yellow; }