Header Menu change color when scrolling

Hi,

I’d like my top menu to be transparent with white font and logo at the top.
And then change to white background with black font while scrolling the page. (like it is right now)

What do i have to change how? Do I need a white logo file or Is it possible to change the color automatically?

Current state:
https://therichkids.de/

best, Tobias

Hello,

First thanks for using our Sydney Pro theme!

  1. First please change your main logo to light version (white).
  2. Install and activate the TC Custom JavaScript plugin
  3. Go To Appearance > Custom JavaScript
  4. Paste the following code into the provided box
    
    (function($){
        
        if ( matchMedia( 'only screen and (min-width: 1025px)' ).matches ) {
            $(window).on('scroll', function(){
                if( $('.site-header').hasClass('float-header') ) {
                    // Dark logo image URL should be here
                    $('.site-logo').attr('src', 'https://cdn2.vectorstock.com/i/1000x1000/75/91/happy-human-and-light-bulb-logo-design-vector-21627591.jpg');
                } else {
                    // Light logo image URL should be here
                    $('.site-logo').attr('src', 'https://therichkids.de/wp-content/uploads/2021/05/Logo-V4.png');
                }
            });
        }
        
        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
            // Dark logo image URL should be here
            $('.site-logo').attr('src', 'https://cdn2.vectorstock.com/i/1000x1000/75/91/happy-human-and-light-bulb-logo-design-vector-21627591.jpg');
        }

    })(jQuery);
    
  1. Go to Appearance > Customize > Additional CSS and add the given custom CSS code below:
@media screen and (min-width: 1025px) {
	#mainnav ul li a, 
    #mainnav ul li::before {
		color: #FFF !important;
	}

	.site-header.float-header #mainnav ul li a,
    .site-header.float-header #mainnav ul li a {
    	color: #000 !important;
    }
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,

I finally was able to implement your code. It works like a charm, thanks a lot!

best, Tobias

Hello Tobias,

You are welcome!

Let us know if you need any further help!

Kind Regards,

Rodrigo.

aThemes Support