# Text inverting during scroll?

**URL:** <https://forum.readymag.com/t/text-inverting-during-scroll/6085>\
**Category:** Custom code\
**Created:** [April 27, 2026, 3:32pm UTC](https://forum.readymag.com/t/text-inverting-during-scroll/6085 "2026-04-27T15:32:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ali\_144](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@ali\_144](https://forum.readymag.com/u/ali_144)\
**Post date:** [April 27, 2026, 3:32pm UTC](https://forum.readymag.com/t/text-inverting-during-scroll/6085/1 "2026-04-27T15:32:05Z")

</div>

Hi everyone, I’m trying to use the custom code widget to add a few things into my site.

I’ve got a nav bar at the top which consists of text and a png logo/image widget which are fixed in place as you scroll down. Effectively I want these to invert as they scroll over content. I know this should be achievable by using the below and finding the data-id…

[data-id=“PASTE WIDGET ID HERE”] {  
mix-blend-mode: difference;  
}

however, when I do this I either get the above just pasted out in words or the widget box is empty. Am I doing something wrong, getting the wrong data id or missing something?

I’m trying to achieve a similar effect to this so the nav bar is visible at all times.

> **[Mainlyphotography studio](https://mainlyphotography.com)**
>
> We are a small but mighty team moving seamlessly between Edinburgh, Scotland and Granada, Spain. We craft smart, thoughtful, well executed ideas using digital and traditional media.

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [June 2, 2026, 8:10am UTC](https://forum.readymag.com/t/text-inverting-during-scroll/6085/2 "2026-06-02T08:10:06Z")

</div>

if you use the difference blending mode the text/element should have the color white…  
otherwise it will not work like intended.  
See also:

> [@Menu - blending mod](https://forum.readymag.com/t/menu-blending-mod/1986):
>
> Hi, I’m trying to use blending mode on the text of my menu but without any results. I’d like it to change to “difference” when it hovers over any widget but the text remains the same color. I’ve inserted this code with the text’s ID in the CSS tab: [data-id=“650c621f75667f0053365076”] { mix-blend-mode: difference; } Could you help me?