Search code examples
javascriptcssprestashop

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

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: enter image description here

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

enter image description here

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");
    }
}