The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS on Hover issue

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #273777

    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.

    I tried many ways but failed.

    Here is live example:

    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;


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.