Carousel "X"

[arminunruh]

I'm going to work on the site title being able to have a mixed blend mode difference, too. With the next update, you're going to be able to have your site title work like that, so you won't have to write custom CSS

[arminunruh]

and for the X icon i will code this too <3

[Marcal]

Hi Armin,

I'm so sorry for not having the Lay Theme updated to the latest version when I wrote this post. I usually receive a message from my WordPress asking to update, but it didn't work this time.

I have updated everything. It resolved the initial "X" icon on the desktop home page, but the issue persists on mobile—emptied the cache before testing. (Screenshot attached)

I will follow your advice and suggestion to adjust the menu position to align with the "X" icon.

One workaround I did in the past was to add an image to the top of the project for the menu to be visible, but I personally don't like how it looks:
https://www.marcal.net/river-rights/

The difference in mixed blend modes is an amazing feature! I'm going to use it. And I'm very grateful that you're going to add this feature to the site title as well. 🎊

Many thanks for everything.

[arminunruh]

Thanks! The remaining X is the search close icon. Your updated Lay Theme CSS already contains the fix, but WP Fastest Cache is still serving an older minified CSS file. Please use “Delete Cache and Minified CSS” in WP Fastest Cache, then reload the page. Clearing only the browser cache is not enough.

[Marcal]

Of course, after following your indications, it works like a charm on mobile. So many things to keep present!

Again, thank you so much, Armin, for your priceless support.

[arminunruh]

aha thanks a lot!! <3 :))

[Marcal]

This post is deleted!

[Marcal]

Hi Armin!

Good news! My site logo now has the same mix-blend-mode: difference effect 🎊
I had to change the black logo SVG to a white one so this would work.

Anyway, I also have this custom CSS that does the job, even without the feature activated:

---

a.sitetitle,
a.sitetitle.is-fixed {
mix-blend-mode: difference;
background: transparent;
isolation: auto;
}

a.sitetitle img {
mix-blend-mode: normal;
}

---

Screenshot attached.

[Marcal]

Last thing: now the carousel "X" icon does not appear when landing on the home screen (good!), but it also does not appear when visiting any of the project links on the home page.

However, the "X" icon is still functional, so clicking on the "X" icon area when visiting a project closes it and returns to the home page.

Is it possible to have the "X" icon feature back, only when visiting any of the homepage project links?

Then I would add the following CSS to apply the mix-blend-mode: difference effect to the "X" icon.

---

div.close-projects-overlay {
mix-blend-mode: difference;
background-color: transparent;
isolation: auto;
}

---

Many thanks!

[arminunruh]

Hey, you need to set up the icon to be white, cuz that's what mix blend mode difference needs to work correctly.

[arminunruh]

div.close-projects-overlay {
color: #fff !important;
mix-blend-mode: difference;
background-color: transparent;
isolation: auto;
}

You can also try this CSS. <3

[Marcal]

Hi Armin!

Thank you so much for this. It works perfectly; now not only does the "X" icon appear when visiting the project, but it also has the mix-blend-mode effect.

Best support ever! 🙌

[Marcal]

There's one more thing... sorry for this!

When I tested the lightbox feature of the project, the same issue occurred with the "X" icon: it's there, it works, but it doesn't show.

Can I send you a video screenshot or GIF?