I'm trying to build a navigation bar where the links are of color white (in the hero section i have an image) so when i scroll down i have a section of color white where i would like to add the mix-blend-mode: difference; property to achive what i want. I'm using Tailwind and Astro
I have tried without using tailwind, creating new pens, and a lot of things and i cant get it working, even following a simple tutorial. I readed the MDN for the mix blend but still cant get it working.
This is where i would like to add the mix blend:
<header class="fixed left-0 top-0 z-[999999] w-full">
<nav class=" z-[999] absolute flex items-center w-full justify-between p-6">
Logo...
<button class="opacity-100 text-montreal bg-white text-xl tracking-normal text-black rounded-md cursor-pointer px-4 py-2" id="logo-btn">⁜</button>
Links...
<ul class="text-montreal text-2xl [&_li]:cursor-pointer text-white flex items-center gap-5 [&_li]:leading-10">
<li class="p relative flex flex-col">
<div class="flex items-center justify-center gap-2">
Sell
some svg...
</div>
<div class="inner-line bg-white w-full h-[2px] absolute -bottom-2 opacity-0" />
</li>
<li class="p relative">
Rent
<div class="inner-line bg-white w-full h-[2px] absolute -bottom-2 opacity-0" />
</li>
<li class="p relative">
Blog
<div class="inner-line bg-white w-full h-[2px] absolute -bottom-2 opacity-0" />
</li>
<li class="p relative">
Taxes
<div class="inner-line bg-white w-full h-[2px] absolute -bottom-2 opacity-0" />
</li>
</ul>
CTA...
<button class="chronicle-button bg-white backdrop-blur-[1px] bg-opacity-15 outline-none border-none rounded-full p-4 flex items-center justify-center px-7 text-white text-montreal">
<span>
<em>Contact</em>
</span>
<span>
<em>Contact</em>
</span>
</button>
</nav>
</header>
Practicly in all of my elements, meaning that it could go into the logo, links, and the CTA button.
I'm adding the navbar in this section:
<body class=" overflow-x-hidden bg-white w-full">
<Navbar />
<div class="h-screen bg-white">
<div class="left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-full overflow-hidden relative">
<img /> Image 1...
<img /> Image 2...
<img /> Image 3...
</div>
</div>
<section class="bg-white h-full">Content...</section>
</body>
Anything helpful will be welcome. Thanks