One page menu-item keeps highlighted until i click on another one

Hello,

I am using f.e. this code:

<nav class="primary-menu col-lg-4 order-lg-1">
<ul class="menu-container one-page-menu" data-easing="easeInOutExpo" data-speed="1300" data-offset="60">
<li class="menu-item"><a class="menu-link" href="#" data-href="#about"><div>Úvod</div></a></li>

Smooth scrolling works, it gets where it needs to be, so everything from this point is fine.

However I don't like that those menu-items keep their "highlight/hover" color until i click on another one in menu. I would like them to "deselect" to their normal color after I click on them, so they wouldn't be highlighted when user has f.e.: clicked on one and then proceeded to scroll the site.
Is there any way to do it?

Don't have live site yet so at least posting screenshot somewhat describing what i mean.
Thank you in advance!

Thank you for reply.

I have the navigation code setup this way:

		<!-- Header
		============================================= -->
		<header id="header" class="transparent-header" data-sticky-class="not-dark">
			<div id="header-wrap">
				<div class="container">
					<div class="header-row justify-content-lg-between">

						<!-- Logo
						============================================= -->
						<div id="logo" class="col-auto me-lg-0 order-lg-2">
							<img src="images/webimages/logo.png" alt="RZ Group logo">
						</div><!-- #logo end -->

						<div id="primary-menu-trigger">
							<svg class="svg-trigger" viewbox="0 0 100 100"><path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path><path d="m 30,50 h 40"></path><path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path></svg>
						</div>

						<!-- Primary Navigation
						============================================= -->
						<nav class="primary-menu col-lg-4 order-lg-1">

							<ul class="menu-container one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="60">
								<li class="menu-item"><a class="menu-link" href="#" data-href="#about"><div>O nás</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#services"><div>Naše služby</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#pricing"><div>Ceník</div></a></li>
							</ul>

						</nav>

						<nav class="primary-menu col-lg-4 order-lg-3">

							<ul class="menu-container justify-content-lg-end one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="60">
								<li class="menu-item"><a class="menu-link" href="#" data-href="#form"><div>Přihláška</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#gallery"><div>Galerie</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#contact"><div>Kontakt</div></a></li>
							</ul>

						</nav><!-- #primary-menu end -->

					</div>
				</div>
			</div>
			<div class="header-wrap-clone"></div>
		</header><!-- #header end -->

So the second half works as intended, but first remains selected if clicked and even when scrolling the whole page.
Also my last section of page is rather thin and navbar doesn't keep it highlighted even when page is scrolled whole way to the bottom.

So I would prefer if there was a chance to only highlight selected section on hover. So after clicking on it it would go immediately back to non-highlighted. It would be preferable for me because now half of my navigation doesn't work properly and second half has that troublesome thin section.

Thank you!