Header transparency to fade on scroll

Hi,

Try to add the code below to the custom js field.

jQuery(document).scroll(function() {
            var y = jQuery( 'body' ).scrollTop();
            if (y > 100) {
                jQuery( '.mob-menu-header-holder' ).addClass('custom-mobile-header');
            } else {
                jQuery( '.mob-menu-header-holder' ).removeClass('custom-mobile-header');
            }
});

The Y defines the number of pixels in the scroll that will trigger that code.

And add this one to the custom css field.

.custom-mobile-header {
     background: rgba(0, 0, 0, 0.3);
}

Clear the cache and test again.

Let me know the result.

Hey thanks for responding! I just tried that but nothing changed at all. Any ideas?

it seems you have some cache mechanisms, try to purge them and also clear the browser cache and test again.

Yea I did both multiple times but it didnt work. Best I can do is just have the header permanently slightly transparent which isn’t a big problem, if you find out the problem let me know!

Need to discuss it further with you in private.
can you send me an email to [support AT wpmobilemenu DOT com] ?

Will close the topic.

hello rui:

I have the same problem, where can I place the js code?

Thanks for the support

@ialvarez2017 Will reply in the other topic.