Active navbar not highlight - html

Question

I'm a new to this website and for coding, i m trying to highlight active menu. i have been search almost of two weeks. still not resolved. i have tried with jquery cdn, it works, but when i upload all this to web, it doesn't work. when i click the menu it highlight and disappear suddenly. so it didnt succes with jquery cdn. here is the jquery cdn i have used.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
please help. here are my codes. if css wrong can someone of you please correct this?
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="scrollNav">
<ul class="nav navbar-nav navbar-left-block">
<li><span class="ico"><i class="fas fa-home"></i></span> Home</li>
<li class="currentPage"><a>Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-block">
<li class="user-balance"><span class="ico"><i class="material-icons">attach_money</i></span> <span class="nav-text">$0.00</span><span class="hidden badge" style="background-color: #fea621;">$0.00</span></li>
<li class="dropdown">
<span class="ico"><i class="fas fa-user-cog"></i></span> <span class="nav-text">newuserpanel</span> <span class="caret"></span>
<ul class="dropdown-menu">
<li>Account</li>
<li>API</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><span class="ico"><img src="/home.png" alt="Home" /></span> Home</li>
<li ><span class="ico"><img src="/Services.png" alt="Services" /></span> Services</li>
<li ><span class="ico"><img src="/history.png" alt="History" /></span> history</li>
<li ><span class="ico"><img src="/Support.png" alt="Support" /></span> Support</li>
<li ><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</li>
<li ><span class="ico"><img src="/API.png" alt="API" /></span> API</li>
<li ><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</li>
</ul>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li ><span class="ico"><img src="home.png" alt="Home" /></span> Home</li>
<li ><span class="ico"><img src="Services.png" alt="Services" /></span> Services</li>
<li ><span class="ico"><img src="history.png" alt="Orders" /></span> History</li>
<li ><span class="ico"><img src="/API.png" alt="API" /></span> API</li>
<li class="dropdown ">
<span class="ico"><img src="/dggher5t.png" alt="chaman" /></span> Support <span class="caret"></span>
<ul class="dropdown-menu">
<li ><span class="ico"><img src="/Support.png"/></span> Support</li>
<li ><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</li>
<li ><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</li>
</ul>
</li>
</ul>
</div>
</div>
here is the css
}
.dahshat-board .navbar-default {
background-color: transparent;
border-color: transparent;
padding: 10px 0;
margin: 0;
background-image: none;
}
.nav-bottom {
position: relative;
z-index: 3;
}
.nav.page-navigation {
background: #fad534;
border-radius: 500px;
display: flex;
width: 100%;
position: relative;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
justify-content: center;
}
.nav.page-navigation li {
display: inline-flex;
width: auto;
align-items: center;
flex: 0 0 10.85%;
flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
display: block;
width: auto;
text-align: left;
}
.nav-bottom .nav li .ico {
margin-right: 4px;
width: 28px;
height: 28px;
background: #2b1f60;
border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
background: #fad534;
border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
font-size: 13px;
line-height: 44px;
color: #2a1e5e;
display: flex;
justify-content: center;
position: relative;
align-items: center;
padding: 2px 9px;
border-radius: 500px;
white-space: pre;
width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
/* background: transparent;
border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
background: transparent;
outline: none;
}
.nav-bottom .nav .dropdown li a {
line-height: 18px;
display: block;
padding: 4px 10px;
position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
.nav-bottom .nav li.active a {
color: #fad534;
background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
display: none;
}
.navbar-collapse.mobileNav{
padding:0;
}
.navbar-collapse.collapse.mobileNav ul.navbar-nav.nav {
display: none;
}
.nav-bottom .nav li.dropdown.open .dropdown-menu a {
background: transparent;
border-radius: 0;
color: #2a1e5e;
}
.dahshat-board .navbar-default .navbar-nav > li > a {
color: #ffffff;
font-size: 14px;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
line-height: 34px;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a {
color: #4d0e88;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a .ico {
background: #480d80;
color: #efe9f5;
border: 1px solid #480d80;
}
.dahshat-board .navbar-default .navbar-nav > li > a:hover,
.dahshat-board .navbar-default .navbar-nav > li > a:focus{
color: #ffffff;
background-color:transparent;
}
.dahshat-board .navbar-default .navbar-nav > .open > a,
.dahshat-board .navbar-default .navbar-nav > .open > a:hover,
.dahshat-board .navbar-default .navbar-nav > .open > a:focus{
background: transparent;
}
.dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage {
position: relative;
}
.dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage::before {
content: '/';
color: #ffffff;
display: inline-block;
position: absolute;
top: 17px;
left: 0;
}
.dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav.navbar-left-block .currentPage::before{
color: #480d80;
}
.navbar-nav li.mobileSearch{
display: none;
}

Answer 1

The previous CSS it's a little too long, so i'll get into the explanation.
When you use this
$(document).on('click', 'ul li', ...
You're selectin any li element which is son, or grandson or so on, from any ul element. This kind of selector should be used wisely, or you may end selecting something you don't want to.
So first, try changing that into
$(document).on('click', 'ul>li', ...
To select only li elements who are direct child of ul elements.
Then, make sure that your CSS rules target to li elements with an "active" class to apply your rule and that should make it.
Edit: If this is the only thing where you're using Jquery, you may try this instead and get rid of Jquery in order to save some bandwidth when loading the page:
let prev = null;
let items = document.querySelectorAll("ul>li");
items.forEach((el)=> el.addEventListener("click", ()=>{
el.classList.add("active");
if(prev) prev.classList.remove("active");
prev = el;
});
I hope this helps enough.