Jump to content

Disable Mix Blend Mode when Hamburger Menu opens in Header

Go to solution Solved by JayVanDyke,

Recommended Posts

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 by KevinWalton
Link to comment
  • KevinWalton changed the title to Disable Mix Blend Mode when Hamburger Menu opens in Header

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
  • 2 weeks later...
  • Solution

@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;
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.