RDC Posted January 11 Share Posted January 11 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 Link to comment
RDC Posted February 3 Author Share Posted February 3 Hey @tuanphan was wondering if you had any ideas for this one? Thank you! Link to comment
tuanphan Posted February 5 Share Posted February 5 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cscholz Posted April 11 Share Posted April 11 @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 Link to comment
tuanphan Posted April 16 Share Posted April 16 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 cscholz 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cscholz Posted April 16 Share Posted April 16 (edited) 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? Edited April 16 by cscholz update Link to comment
tuanphan Posted April 18 Share Posted April 18 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 cscholz 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cscholz Posted April 18 Share Posted April 18 @tuanphan wow, easy. Thanks for the reply good sir! Link to comment
BLK Posted May 26 Share Posted May 26 Can this invert of header come into effect after first section please? Thank you! Link to comment
tuanphan Posted May 28 Share Posted May 28 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
OddballDesignCo Posted May 28 Share Posted May 28 (edited) @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! Edited May 28 by OddballDesignCo Link to comment
tuanphan Posted May 31 Share Posted May 31 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment