problems with changing background color of nav-items with bootstrap

Question

Currently I' m working on the navbar of my website and I have problem with my javascript code. I used the scroll-spy feature on my navigation and a java-script for smooth scrolling. In addition I want that the nav - items(links) background color change, when scrolling to the next section of the website. I developed a suitable code, but it does not function - its literally doing nothing.

 scroll_navbar { position: fixed; width: 14%; height: 100vh; z-index: 3; padding: 0; padding-left: 1%; } .nav-item { background-color: rgba(255,255,255,0.6)!important; margin: 6px; transition: 0.7s all; } .nav-item :hover { background-color: rgba(255,255,255,1)!important; color: rgb(0,0,0); } body { position: relative; } .active { background-color: rgba(255,255,255,1)!important; } .nav-link { color: #000000; } .nav-item.scrolled { background-color: rgba(249,71,108,0.6)!important; margin: 6px; transition: 0.7s all; } .nav-item .scrolled :hover { background-color: rgba(249,71,108,1) !important; color: rgb(0,0,0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container d-flex align-items-center" id="scroll_navbar"> <div class="row"> <div class="col" style="padding: 0;"> <div id="spy"> <ul class="nav flex-column"> <li class="nav-item"><a href="#part1" class="nav-link">home</a></li> <li class="nav-item"><a href="#part2" class="nav-link">about</a></li> <li class="nav-item"><a href="#part3" class="nav-link">price</a></li> <li class="nav-item"><a href="#part4" class="nav-link">contact</a></li> </ul> </div> </div> </div> </div> <script> $(function () { $(window).scroll(function () { var $nav = $('.nav-item'); $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); }); }); </script> <script> $('body').scrollspy({ target: '#spy'}) </script> <script src="smooth-scroll.js"></script> <script> var scroll = new SmoothScroll('a[href*="#"]'); </script>

Could you find a better solution to change the background color of my links (nav-item)?

Answer 1

I think you're question should be more clear. you forgot to write the link tag there in css .nav-item a . It's very simple check it out.

 scroll_navbar { position: fixed; width: 14%; height: 100vh; z-index: 3; padding: 0; padding-left: 1%; } .nav-item a { color:white; background-color: grey!important; margin: 6px; transition: 0.7s all; } .nav-item :hover { background-color: rgba(255,255,255,1)!important; color: rgb(0,0,0); } body { position: relative; } .active { background-color: rgba(255,255,255,1)!important; } .nav-link { color: #000000; } .nav-item.scrolled { background-color: rgba(249,71,108,0.6)!important; margin: 6px; transition: 0.7s all; } .nav-item .scrolled :hover { background-color: rgba(249,71,108,1) !important; color: rgb(0,0,0); }

 <div class="container d-flex align-items-center" id="scroll_navbar"> <div class="row"> <div class="col" style="padding: 0;"> <div id="spy"> <ul class="nav flex-column"> <li class="nav-item"><a href="#part1" class="nav-link">home</a></li> <li class="nav-item"><a href="#part2" class="nav-link">about</a></li> <li class="nav-item"><a href="#part3" class="nav-link">price</a></li> <li class="nav-item"><a href="#part4" class="nav-link">contact</a></li> </ul> </div> </div> </div>