Freshly updated, discover how to create an underlined navbar menu item

Question

I'm trying to underline the currently selected menu item in a navbar, but I'm having trouble getting it to work.

Here's my code:

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

It's a common practice to underline or highlight the selected menu link, but I'm struggling to do this with Bootstrap 5.

Answer 1

Answer №1

Experiment with changing the 'active' class:

.navbar-nav .active { text-decoration: none; background-color: green; }

Answer 2

Experiment with changing the 'active' class:

.navbar-nav .active { text-decoration: none; background-color: green; }

Answer 3

In order to enhance the appearance of the navigation links, it is recommended to use the pseudo-class :focus on the .nav-link element.

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

Answer 4

In order to enhance the appearance of the navigation links, it is recommended to use the pseudo-class :focus on the .nav-link element.

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

Answer 5

The reason why your css is not affecting the .nav-item is because it never receives focus.

If you want it to receive focus, you can use the tabindex attribute.

Alternatively, you can change it to

.nav-link:focus {text-decoration: underline;}

(you won't even need to use !important for that).

Answer 6

The reason why your css is not affecting the .nav-item is because it never receives focus.

If you want it to receive focus, you can use the tabindex attribute.

Alternatively, you can change it to

.nav-link:focus {text-decoration: underline;}

(you won't even need to use !important for that).