Fix CSS width-animation issue due to scrollbar hiding in Chrome

Question

I have animation on my Navbar when I hover over my sections, but when I hid the scrollbar in Chrome the right element's animation broke. There is a bar which width go to 100% when I hover it and 0% when it is not hovering. But the Contact section's bar stay there even after I leave it.

Here are 2 picture of the issue:

See in the 2nd last picture it persist.

The code:

HTML (it is on a body tag):

 * { margin: 0; padding: 0; } html { scrollbar-width: none; /* Firfox scroll hiding*/ scroll-behavior: smooth; } body{ margin: 0px; font-family: 'Roboto', sans-serif; background-color: #e6e6eb; -ms-overflow-style: none; /* IE and Edge scrollbar hiding*/ } body::-webkit-scrollbar { /* Chrome scroll hiding*/ display: none; } /*This is to ensure that the navigation navigate to the correct element*/.anchor-offset{ display: block; height: 80px; /*same height as header*/ margin-top: -70px; /*same height as header*/ visibility: hidden; } /*navbar ======================================*/.nav-container { width: 80%; margin: 0 auto; } header { background: #202124; position: fixed; width: 100%; top: 0; z-index: 999; } header::after { content: ''; display: table; clear: both; }.nav-logo { float: left; height: 60px; margin: 8px; border-radius: 10px; } nav { float: right; } nav ul { margin: 0; padding 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 23px; position: relative; } nav a { color: aliceblue; text-decoration: none; text-transform: uppercase; font-size: 20px; font-weight: bold; } nav a:hover { color: azure; } nav a::before { content: ''; display: block; height: 5px; background-color: aliceblue; position: absolute; top: 10px; width: 0px; transition: all ease-in-out 250ms; } nav a:hover::before { width: 100%; } nav div:hover { color: azure; } nav div::before { content: ''; display: block; height: 5px; background-color: aliceblue; position: absolute; top: 0; width: 0px; transition: all ease-in-out 250ms; } nav div:hover::before { width: 100%; }

 <header> <div class="nav-container"> <img src="Images/YourLogo.PNG" alt="logo" class="nav-logo"> <nav> <ul> <li> <a href="#Home">Home</a></li> <li> <a href="#About">About</a></li> <li> <a href="#Gallery">Gallery</a></li> <li> <a href="#Menu">Menu</a></li> <li> <a href="#Testimonials">Testimonials</a></li> <li> <a href="#Contact">Contact</a></li> </ul> </nav> </div> </header>

How would I fix this? Thank you in advance.

Answer 1

 * { margin: 0; padding: 0; } html { scrollbar-width: none; /* Firfox scroll hiding*/ scroll-behavior: smooth; } body{ margin: 0px; font-family: 'Roboto', sans-serif; background-color: #e6e6eb; -ms-overflow-style: none; /* IE and Edge scrollbar hiding*/ } body::-webkit-scrollbar { /* Chrome scroll hiding*/ display: none; } /*This is to ensure that the navigation navigate to the correct element*/.anchor-offset{ display: block; height: 80px; /*same height as header*/ margin-top: -70px; /*same height as header*/ visibility: hidden; } /*navbar ======================================*/.nav-container { width: 80%; margin: 0 auto; } header { background: #202124; position: fixed; width: 100%; top: 0; z-index: 999; } header::after { content: ''; display: table; clear: both; }.nav-logo { float: left; height: 60px; margin: 8px; border-radius: 10px; } nav { float: right; } nav ul { margin: 0; padding 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 23px; position: relative; } nav a { color: aliceblue; text-decoration: none; text-transform: uppercase; font-size: 20px; font-weight: bold; } nav a:hover { color: azure; } nav a::before { content: ''; display: block; height: 5px; opacity: 0; background-color: aliceblue; position: absolute; top: 10px; width: 0px; transition: opacity.01s linear, width ease-in-out 250ms; } nav a:hover::before { width: 100%; opacity: 1; } nav div:hover { color: azure; } nav div::before { content: ''; display: block; height: 5px; background-color: aliceblue; position: absolute; top: 0; width: 0px; transition: all ease-in-out 250ms; } nav div:hover::before { width: 100%; }

 <header> <div class="nav-container"> <img src="Images/YourLogo.PNG" alt="logo" class="nav-logo"> <nav> <ul> <li> <a href="#Home">Home</a></li> <li> <a href="#About">About</a></li> <li> <a href="#Gallery">Gallery</a></li> <li> <a href="#Menu">Menu</a></li> <li> <a href="#Testimonials">Testimonials</a></li> <li> <a href="#Contact">Contact</a></li> </ul> </nav> </div> </header>

Answer 2

I fixed it by making the naimation for from the right instead of the left by adding

nav a::before {
    content: '';
    display: block; 
    height: 5px;
    
    background-color: aliceblue;
    
    position: absolute;
    top: 10px;
    width: 0px;
    right: 0px;   *<- Add this*
    transition: all ease-in-out 250ms;
}