Header navigation and logo invert against background on scroll

Hey guys,

I was wondering if anyone knows how to make the logo and header nav links invert against the background as you scroll?
Similar to this site: https://www.highmoon-studio.com/

Thank you in advance!

https://penguin-marigold-6tge.squarespace.com/
PW: Rc123

Hey @tuanphan  was wondering if you had any ideas for this one? Thank you!

Try this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
header#header {
    mix-blend-mode: difference;
    background-color: transparent !important;
}

header#header * {
    color: white !important;
}
}

@tuanphan I tried this code and it works, but it is also applying this effect to my custom nav links..I would only like this applied to my logo. Is this possible?

https://www.chrisscholzdesign.com

pw: CSDesign123

On 4/12/2024 at 3:21 AM, cscholz said:

@tuanphan I tried this code and it works, but it is also applying this effect to my custom nav links..I would only like this applied to my logo. Is this possible?

 

https://www.chrisscholzdesign.com

pw: CSDesign123

Change this ID

header#header * 

to this

header#header a#site-title 

thank you @tuanphan!! I have decided to keep the blend mode active on header title and links. Is there a CSS code to have it applied to mobile as well?

On 4/16/2024 at 11:49 PM, cscholz said:

thank you @tuanphan!! I have decided to keep the blend mode active on header title and links. Is there a CSS code to have it applied to mobile as well?

Change 992px in the code to 1px

@tuanphan wow, easy. Thanks for the reply good sir!

Can this invert of header come into effect after first section please?

Thank you!

On 5/27/2024 at 6:08 AM, BLK said:

Can this invert of header come into effect after first section please?

 

Thank you!

You can use this code, but you need to add it to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('tp-invest');
        }
        else {
            $('header#header').removeClass('tp-invest');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  @media screen and (min-width:992px) {
.tp-invest {
    mix-blend-mode: difference;
    background-color: transparent !important;
}

.tp-invest * {
    color: white !important;
}
}
</style>

Adjust 800 to value what you want

@tuanphan This worked for my website, but I don't want the effect to be applied to my full-screen menu. I want it to apply to the hamburger icon (which it is) but I don't want it to apply to the pop-up menu. Can you help me with this? Thank you!

On 5/29/2024 at 3:44 AM, OddballDesignCo said:

@tuanphan This worked for my website, but I don't want the effect to be applied to my full-screen menu. I want it to apply to the hamburger icon (which it is) but I don't want it to apply to the pop-up menu. Can you help me with this? Thank you!

That code should work with Desktop Only. In case you use burger menu on desktop, you can share site url, I can check easier