Need transparent header menu background to turn opaque on scroll

Support
#1

Hello, I’m editing this website:http://johannadeis.com/
I just can’t find out, how I can make the background of the header menu turn white, when scrolling down.
Thank you for your help!

Johanna

#2

Hello @johannadeis,

Thanks for asking. :slight_smile:

Please use the solution shared by my colleague in following thread:

Kindly make sure to change the color codes appropriately.

Thanks.

#3

Thx for helping out! I just tried that but it doesn’t seem to work… nothing changed http://johannadeis.com/

#4

Hi there,

Please update the code to:

jQuery ( function($) {

    $(window).on('scroll', function() {

        if ( $(this).scrollTop() > 0 ) {
            $('.x-navbar').css('background', 'rgba(0, 0, 0, 0.9) !important');
        } else {
            $('.x-navbar').attr('style', '');
        }

    } );

} );

Hope this helps.

#5

Tried that, still no effect on the menu ?! www.johannadeis.com

#6

Hey There,

It seems that there is no content in your page that we can test out.

If you are using a custom 404, under construction or any plugin that locks out viewers, please allow us to see the home page so that we can take a closer and test the given JS code in your site.

Thanks.

#7

Oh, I’m sorry, I set the page to private… now it’s public: www.johannadeis.com
thx for helping out :slight_smile:

#8

Hi There,

Please update the custom JS code to this:

jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() > 0 ){
        	$('.x-navbar').addClass('navbar-solid');
        } else {
        	$('.x-navbar').removeClass('navbar-solid');
        }
    });
});

After that adding this custom CSS under X > Theme Options > CSS:

.x-navbar.navbar-solid {
    background-color: rgba(234, 227, 227, 0.7) !important;
}

Let us know how it goes!

#9

oh, this one worked perfectly! :slight_smile:
thx so much!

1 Like
#10