1

I've been trying to figure out how to make mix-blend-mode work on my navigation text in my header without using JavaScript. This is what I'm trying to achieve: https://www.lizvwells.com/project/stonewall-forever

I thought it would be much simpler, but I'm not sure why it's not working. I don't have a background image or color on the header, I just want the text in the nav to blend with the images and text on the page as the user scrolls. I've tried adding 'transparent' color on the header and without, and tried adding the mix-blend-mode in the nav a but that didn't work either. The only time it worked is when I added the mix-blend-mode property on the header tag, the issue was that it only worked on hover (weirdly) but it just kicked the text back behind images otherwise. Please help!

Here is my code:

<header>
  <nav>
    <div class="left">
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </div>

    <div class="right">
      <a href="index.html">Name</a>
    </div>
  </nav>
</header>

    header {
      position: fixed;
      display: flex;
      flex-direction: row;
      align-items: center;
      top: 0;
      left: 0;
      width: 100%;
      padding: 36px 36px 20px 36px;
      z-index: 2;
      
      background-color: transparent;
    }
    
    header div.left {
      font-size: 24px; 
      
      padding: 36px;
      
      position: absolute;
      top: 0;
      left: 0;
    }
    
    header div.right {
      font-size: 36px;
      
      padding: 36px;
      
      position: absolute;
      top: 0;
      right: 0;
    }
    
    nav {
      mix-blend-mode: difference;
    }
    
    nav a {
      margin: 0 0 0 16px;
      padding: 10px;
      height: 300px;
      width: 450px;
      font-size: 36px;
      color: #000000;
      
      font-variation-settings: "wght" 100, "wdth" 100;
      transition: font-variation-settings .2s;
    }
    
    nav a:hover {
      font-variation-settings: "wght" 500, "wdth" 200;
    }
Nura Salah Husseini
  • 11
  • 2
  • related: https://stackoverflow.com/q/59419494/8620333 / https://stackoverflow.com/a/60875044/8620333 / – Temani Afif Jan 15 '21 at 23:05
  • Hi! Thank you for your help! I reviewed those links, but I still can't seem to make it work. I need to include the z-index because the header disappears behind the content. Will this not work then? – Nura Salah Husseini Jan 17 '21 at 18:44

0 Answers0