on Hover issue

[therockstar]

Good day everyone,

I am looking for some solution to show Hover, border-bottom on username (Hi, Jenny) only. Currenlty It is hovering all the way to circle of first alphabet of user. https://imgur.com/a/OE1cGWl

I tried many ways but failed.

Here is live example: https://sailqa.hometesterclub.com/account/autologger/796215212016/918e152d3e966b4b2a2c88c02238b360/1234?url=%2Fau%2Fen%2FSurvey%2FTasks%2F12645

Here is my css to solve this issue:
.navbar-nav .user-menu-link a:hover
{
border-bottom: none!important;
}
.navbar-nav .username a:hover
{
border-bottom: 2px solid white!important;
}

[Pogany]

Now you have:

.nav>li>a:hover {
    background-color: transparent;
    border-bottom: 2px solid white;
}

Inside the last li>a there is a span.username and a div that contains the badge. Since this li is the last child you may add:

.nav li:last-child>a:hover{border-bottom:none}
.nav li:last-child>a:hover .username{border-bottom: 2px solid white;}

I hope this helps. If it doesn’t please try to put together a basic example in codepen.

[Author]

Posts