CodeIgniter Forums

Full Version: Active navbar not highlight
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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.

here it is [color=var(--blue-700)]codepen.io/lukeroy/pen/PoZWpKm [/color]


Code:
<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?


Code:
<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><a href="/"><span class="ico"><i class="fas fa-home"></i></span> Home</a></li>
            <li class="currentPage"><a>Home</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right navbar-right-block">
                        <li class="user-balance"><a href="/addfunds"><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></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><i class="fas fa-user-cog"></i></span> <span class="nav-text">newuserpanel</span> <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="/account">Account</a></li>
                <li><a href="/privacy">API</a></li>
                <li><a href="/logout">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                                          <li  ><a href="/"><span class="ico"><img src="/home.png" alt="Home" /></span> Home</a></li>
                                                        <li ><a href="services.html"><span class="ico"><img src="/Services.png" alt="Services" /></span> Services</a></li>
                                                        <li ><a href="history.html"><span class="ico"><img src="/history.png" alt="History" /></span> history</a></li>
                                                        <li ><a href="Support.html"><span class="ico"><img src="/Support.png" alt="Support" /></span> Support</a></li>
                                                        <li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>
                                                        <li ><a href="/api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
                                                        <li ><a href="/terms"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>
                                        </ul>
        </div>
      </div>
    </nav>
    <div class="nav-bottom">
      <div class="container">
          <ul class="nav page-navigation">
                                    <li ><a href="/"><span class="ico"><img src="home.png" alt="Home" /></span> Home</a></li>
                                                <li ><a href="services.html"><span class="ico"><img src="Services.png" alt="Services" /></span> Services</a></li>
                                                <li ><a href="history.html"><span class="ico"><img src="history.png" alt="Orders" /></span> History</a></li>
                                                <li ><a href="#api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
                                    <li class="dropdown ">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><img src="/dggher5t.png" alt="chaman" /></span> Support <span class="caret"></span></a>
              <ul class="dropdown-menu">
                                               <li ><a href="Support.html"><span class="ico"><img src="/Support.png"/></span> Support</a></li>

                                               <li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>

                                               <li ><a href="terms.html"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>

                                                                              </ul>
            </li>
          </ul>
      </div>
    </div>

here is the css


Code:
}
.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;
}