[FIXED] How change titles color of my navbar when the user scrolls ? Prestashop

Issue

I would like to change my color titles from my navigation bar when the user scrolls a bit. I work in Prestashop and we can add custom CSS and custom javascript to it.

I started by analyzing the id of the text of the navigation bar in the theme of my prestashop:

Then I created this little javascript:

window.onscroll = function() {
    var title= document.getElementById('title-text');
    if ( window.pageYOffset > 100 ) {
        title.classList.add("white_menu");
    } 
}

and this css:

.white_menu{
color: white;
}

But it doesn't work :/ Did I forget something ?

Thanks in advance Malaury

Solution

Add this style in your CSS

.white_menu span {
    color: white;
}

Replace your JS with this one

window.onscroll = function () {
    var title = document.getElementById('header_menu');
    if (window.pageYOffset > 100) {
        title.classList.add("white_menu");
    } else {
        title.classList.remove("white_menu");
    }
}

Answered By - 54ka

Answer Checked By - Gilberto Lyons (PHPFixing Admin)