KevinWalton Posted September 25, 2023 Share Posted September 25, 2023 (edited) Hello, I am trying to code the header to be mix blend mode. I have found a way to do so, but it effects the hamburger menu as well. I want to remove the mix blend mode on the hamburger menu when it is opened. And when it is closed, mix blend mode will enable again. I am also interested in any other ways to customize specific target elements like the header-title-text to be mix blend mode, but I cannot figure it out. I have been trying to accomplish this for 2 years and I am starting to get tired of trying. Can anyone help me? Code below of what I have so far <script> function toggleheaderburger() { const header = document.getElementById('header'); const headerburger = document.getElementById('header-burger'); const headerburgerbtn = document.getElementById('header-burger-btn'); if (headerburgerbtn.classList.contains('burger--active')) { // Hamburger menu is opened, set blend mode to "normal" header.style.mixBlendMode = 'normal'; headerburgerbtn.classList.remove('burger--active'); headerburger.classList.remove('header-burger'); } else { // Hamburger menu is closed, set blend mode to "difference" header.style.mixBlendMode = 'difference'; headerburgerbtn.classList.add('burger--active'); headerburger.classList.add('header-burger'); } } </script> Edited September 25, 2023 by KevinWalton Link to comment
tuanphan Posted September 27, 2023 Share Posted September 27, 2023 When burger menu is open - closes, body has a class name Quote body.header--menu-open and Quote body:not(.header--menu-open) you can use CSS code to target these to disable mix blend mode when burger is open 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
KevinWalton Posted October 10, 2023 Author Share Posted October 10, 2023 Doesn't seem to work, can you help me understand what to do with this code you have shared? Thank you for responding Link to comment
JayVanDyke Posted October 10, 2023 Share Posted October 10, 2023 @KevinWalton can you share a link to your page? ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
KevinWalton Posted October 10, 2023 Author Share Posted October 10, 2023 Website is https://kevinwalton-portfolio-2023.squarespace.com Password is: 1 Link to comment
JayVanDyke Posted October 10, 2023 Share Posted October 10, 2023 @KevinWalton I only see mix-blend-mode attached to that custom mouse cursor, is that right? It doesn't look like it's attached to the header. If you've disabled your code can you put it back? ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
KevinWalton Posted October 10, 2023 Author Share Posted October 10, 2023 Sorry my bad, I was doing some editing. The code originally posted is now back on the site Link to comment
Solution JayVanDyke Posted October 11, 2023 Solution Share Posted October 11, 2023 @KevinWalton so you shouldnt need the javascript to do anything here. This css should work. You already have this header { mix-blend-mode: difference; } but change it to what @tuanphanwas saying above. body:not(.header--menu-open) header { mix-blend-mode: difference; } tuanphan 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
KevinWalton Posted October 11, 2023 Author Share Posted October 11, 2023 (edited) THANK YOU. This works! Seriously I can't thank you guys enough. I have been trying to figure this out for over 2 years. Thank you so much jaeveedee and tuanphan Edited October 11, 2023 by KevinWalton tuanphan and JayVanDyke 2 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