scrollspy nav bar sticks on active after scrolling away

Question

I am using a scrollspy navbar so that the navbar automatically switches to whichever sections that the user is on; this works fine. Although if I click on a section e.g. 'Contact' and I then scroll up a section to 'Projects', Projects then becomes active on the narbar but the contact section also stays active i.e. it is still bold when it should not be as I scrolled away.

(https://i.sstatic.net/4HKe2.png)

As you can see from the above image, the 'Contact' nav is still active after I scrolled away. This happens for every nav link that I click, once I scroll away the nav link I clicked on stays active.

Can anyone see why?

(function($) {
    "use strict"; // Start of use strict
    //smooth-scrolling
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: (target.offset().top - 56)
                }, 1000, "easeInOutExpo");
                return false;
            }
        }
    });

    //close responsive menu
    $('.js-scroll-trigger').click(function() {
        $('.navbar-collapse').collapse('hide');
    });


    //scrollspy
    $('body').scrollspy({
        target: '#mainNav',
        offset: 56
    });
})(jQuery);

.testnav a {
    font-weight: bold;
}
.testnav a:hover {}
.testnav a.active {
    text-decoration: underline;
}
section {
    padding: 150px 0;
}
header {
    padding: 156px 0 100px;
}
.it-icons a {
    display: inline-block;
    height: 3.5rem;
    width: 3.5rem;
    background-color: #4582EC;
    color: #fff !important;
    border-radius: 100%;
    text-align: center;
    font-size: 1.3rem;
    line-height: 3.5rem;
    margin-right: 1rem;
}
.it-icons a:hover {
    transform: scale(1.2) rotate(20deg);
    background-color: skyblue;
}
.tu-icon a:hover {
    transform: rotate(5deg);
}
.os-icons a {
    display: inline-block;
    height: 3.5rem;
    width: 3.5rem;
    background-color: #4582EC;
    color: #fff !important;
    border-radius: 100%;
    text-align: center;
    font-size: 1.5rem;
    line-height: 3.5rem;
    margin-right: 1rem;
}
.os-icons a:hover {
    transform: scale(1.3) rotate(20deg);
    background-color: skyblue;
}
.proj-icons li {
    display: inline-block;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #4582EC;
    color: #fff !important;
    border-radius: 100%;
    text-align: center;
    font-size: 1.0rem;
    line-height: 2.5rem;
    margin-right: 1rem;
}
.proj-icons a:hover {
    transform: scale(1.3) rotate(20deg);
    background-color: skyblue;
}
.tabs .nav-tabs>li,
.tabs .nav-pills>li {
    float: none;
    display: inline-block;
    margin-bottom: 10px;
    width: 140px;
    border: 1px solid #000000;
    padding: 5px 5px;
}
.tabs .nav-tabs {
    text-align: center;
    border-bottom: 0;
    margin-bottom: 20px;
}
.tabs .nav-tabs li:not(:last-child) {
    margin-right: 10px;
}
.tabs .nav-tabs li a {
    text-transform: capitalize;
    font-size: 20px;
    border-radius: 0;
    transition: all .3s ease;
    font-weight: 600;
    color: #4582EC;
    font-family: "Source Sans Pro", sans-serif;
}
.tabs .nav-tabs li a:hover {
    text-decoration: underline;
    color: #4582EC;
}
.tabs .nav-tabs li a.active {
    text-decoration: underline;
    color: #4582EC;

}
.service-box {
    position: relative;
    width: 100%;
}
.service-box .contents {
    margin-left: 30px;
}
.tab-content {
    position: relative;
    float: left;
    width: 100%;
    z-index: 99;
}
.service-box {
    position: relative;
    width: 100%;
}
.service-box .section-title h3 {
    position: relative;
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    padding-bottom: 20px;
    margin-bottom: 45px;
    color: #000;
    text-transform: uppercase;
}
.service-box .section-title h3:before {
    position: absolute;
    left: 0px;
    content: '';
    bottom: 0px;
    background: #333333;
    height: 1px;
    width: 55px;
}
.progress .progress-bar>span {
    position: relative;
    height: 100%;
}
.progress .progress-bar>span>* {
    position: absolute;
    top: 0;
    transition: opacity .3s ease-out;
}
.progress .grade {
    opacity: 0;
}
.progress:hover .grade {
    opacity: 1;
}
.progress:hover .percentage {
    opacity: 0;
}
.dev-icons {
    font-size: 2.5rem;
}
.dev-icons .list-inline-item i:hover {
    color: #4582EC;
    transform: scale(1.3);

}
.contact-icons {
    color: #4582EC;
    font-size: 3.5rem;
}

.footer {
    background: #000000;
    color: #fff;
}
.footer a {
    color: rgb(238, 238, 238);
    font-size: medium;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary testnav fixed-top" id="mainNav">
    <div class="container">
        <a href="#ptop" class="navbar-brand js-scroll-trigger">CW Portfolio</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">Projects</a> </li>
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#interests">Interests</a></li>
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
            </ul>

            <!--Search bar-->
            <form class="form-inline ml-auto">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" style="height: 37px; border-radius: 10px;">
                <button class="btn btn-light " type="submit">
                    Search
                </button>
            </form>
        </div>
    </div>
</nav>

<section id="projects" style="background-color:whitesmoke;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 style="text-align: center;"> Projects </h2>
                <br>
                <br>
                <br>
                text
            </div>
        </div>
    </div>
</section>

<section id="interests" style="background-color:whitesmoke;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 style="text-align: center;"> Interests & Achievements </h2>
                <br>
                <br>
                <br>
                text
            </div>
        </div>
    </div>
</section>

<section id="contact">
    <div class="container">
        <h2 style="text-align: center;"> Contact Me </h2>
        <br>
        <br>
        <br>
        <div class="row ">
            <div class="col-lg-4 ">
                <div class="text-center p-4 shadow">
                    <div class="contact-icons">
                        <i class="fas fa-home"></i>
                        <br>
                    </div>
                    <div>
                        <br>
                        <h4>Address</h4>
                        <br>
                        <p>xxx</p>
                    </div>
                    <br>
                </div>
                <br>
            </div>
            <br>
            <div class="col-lg-4 ">
                <div class="text-center p-4 shadow">
                    <div class="contact-icons">
                        <i class="fas fa-phone-square-alt"></i>
                        <br>
                    </div>
                    <div>
                        <br>
                        <h4>xxx</h4>
                        <br>
                        <p>xxx</p>
                        <br>
                    </div>
                    <br>
                </div>
                <br>
            </div>
            <br>
            <div class="col-lg-4 ">
                <div class="text-center p-4 shadow">
                    <div class="contact-icons">
                        <i class="fas fa-envelope"></i>
                        <br>
                    </div>
                    <div>
                        <br>
                        <h4>Email</h4>
                        <br>
                        <p>
                            <a href="mailto:name@email.com">
                                xxx
                            </a>
                        </p>
                        <br>
                    </div>
                    <br>
                </div>
                <br>
            </div>
            <br>
        </div>
        <div class="row d-flex">
            <div class="col-md-5" style="float: none; margin: 0 auto; margin-top: 50px;">
                <form action="#" class="bg-light p-4 p-md-5 contact-form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Email">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Subject">
                    </div>
                    <div class="form-group">
                        <textarea name="" id="" cols="30" rows="7" class="form-control" placeholder="Message"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
                    </div>
                </form>
            </div>
            <div class="col-md-7 d-felx">
                <div id="map" style="height: 550px; width: 100%; margin-top:50px; "></div>
            </div>
        </div>
    </div>
</section>

Answer 1

your attached css doesnt show any classes that would describe .nav-link . I know its bootstrap related question(its adviceable to mention it also). So your a class falls back to

.testnav a {
  font-weight: bold;
}