How to change text color on scroll for a bootstrap nav

user_11340649 0
Viewed 193

I have tried for days now and cannot seem to get the text colour change for my nav bar on the scroll.

I have some Javascript and CSS already working so it changes the background colour of the nav bar but I cannot for the life of me change the text colour

You will see if adds and removes when the page moves y, I have tried adding in more if else statements, also tried changes classes around I have left in the css where I link all the attached classes to the nav items, it does nothing but I have it added in so you can see what shows up attached to the text when I inspect on chrome.

var navbar = document.querySelector('nav')

window.onscroll = function() {

    // pageYOffset or scrollY
    if (window.pageYOffset > 0) {
        navbar.classList.add('scrolled')
    } else {
        navbar.classList.remove('scrolled')
    }
}
.text-nav:hover {
    opacity: 1.9;
    transition: all .1s ease;
    transform: scale(1.05);
}



nav {
    height: 69px;
    width: 100%;
    /*background: linear-gradient(to bottom, #000, #0003 70%,#0000); !* background when scroll is in the top *!*/
    transition: background .5s; /* control how smooth the background changes */
    /*transition: color .5s;*/
}
nav.scrolled {
    /*background: #b6b7b7;*/
    background: #1B1E21;
}


.navbar-light .navbar-nav .active>.nav-link.scrolled {
    color: white;
}
<nav class="navbar fixed-top navbar-expand-lg navbar-light main navbar-custom navbar-static-top ">
<!--    <a class="navbar-brand" href="#"></a>-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse " id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item active">
                <a class="nav-link nav-space text-nav " href="">Home <span
                        class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active nav-space text-nav">
                <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item active nav-space text-nav">
                <a class="nav-link" href="#"><b>David2me</b></a>
            </li>
            <li class="nav-item active text-nav nav-space">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item active text-nav">
                <a class="nav-link" href="#">Contact</a>
            </li>

        </ul>
    </div>
</nav>

.

navbar css html javascript
2 Answers

You never added the class .scrolled to the links. I added them using querySelectorAll and iterated through them with forEach

var navbar = document.querySelector('nav')
var links = document.querySelectorAll('.nav-link')

window.onscroll = function() {

    // pageYOffset or scrollY
    if (window.pageYOffset > 0) {
        navbar.classList.add('scrolled')
        links.forEach(v => {
          v.classList.add('scrolled')
        });
    } else {
        navbar.classList.remove('scrolled')
        links.forEach(v => {
          v.classList.remove('scrolled')
        });
    }
}
body {
  height: 500px;
}

.text-nav:hover {
    opacity: 1.9;
    transition: all .1s ease;
    transform: scale(1.05);
}



nav {
    height: 69px;
    width: 100%;
    /*background: linear-gradient(to bottom, #000, #0003 70%,#0000); !* background when scroll is in the top *!*/
    transition: background .5s; /* control how smooth the background changes */
    /*transition: color .5s;*/
}
nav.scrolled {
    /*background: #b6b7b7;*/
    background: #1B1E21;
}


.navbar-light .navbar-nav .active>.nav-link.scrolled {
    color: white;
}
<nav class="navbar fixed-top navbar-expand-lg navbar-light main navbar-custom navbar-static-top ">
<!--    <a class="navbar-brand" href="#"></a>-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse " id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item active">
                <a class="nav-link nav-space text-nav " href="">Home <span
                        class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active nav-space text-nav">
                <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item active nav-space text-nav">
                <a class="nav-link" href="#"><b>David2me</b></a>
            </li>
            <li class="nav-item active text-nav nav-space">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item active text-nav">
                <a class="nav-link" href="#">Contact</a>
            </li>

        </ul>
    </div>
</nav>

user_102108410

There are two issues you are facing:

  1. Your CSS selector is wrong. You have two select all nav-links that are in your nave bar with the scrolled class. So you have to check for the scrolled class on the nav element, not on the nav-link element: nav.scrolled.navbar-light .navbar-nav .active > .nav-link

  2. Bootstrap is already applying a style to the nav-link element. In your case, it takes precedence over your custom class. To prevent this, you can use color: white !important; to give your color precedence.

user_81443240
Related