CODEWITHSUNDEEP
csswordpress
Heisenberker
Heisenberker

Reputation: 53

Changing sticky menu items color in Wordpress

Im making a website using Wordpress, and I have a sticky menu. When Im on the upper part of page the background is white, so I use black menu items color. But then when I scroll down, black menu background appears, making my items invisible. Is there some way to change CSS code, so that menu items default color is black, but when I scroll down it changes to white ?

Upvotes: 1

Views: 824

Answers (1)

Tristan Hudson
Tristan Hudson

Reputation: 151

If I read this correctly, you would need to capture the scrolling event, and when you are no longer at the top of the page, change the class of your header.

<script>
    jQuery(document).ready(function($) {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) { 
                $('header').addClass('shrink');
            }
            else{
                $('header').removeClass('shrink');
            }
        });
    });
</script>

This example is to make a header shrink, but the same applies for changing font color, size etc.

See here: https://journalxtra.com/wordpress/quicksnips/make-wordpress-theme-headers-shrink-on-scroll/

Upvotes: 1

Related Questions