Logo element site wide, and inverted logo use

[maverick]

Hi,

I was first looking for a way to use a logo globally, like so many other page builders that offer this option.
Unfortunately this is not present on Bricks Builder. So looking around these forums I found a common solution:

How to add website logo globally sitewide in bricks builder?

How can I set website logo globally site wide? Normally in themes like Astra we can add logo from **customizer**. And I can use it anywhere on the website. But In Bricks Builder I didn’t find out. YES! I know there is a widget in bricks called **LOGO** but what if I used widget on my website 20 times. And Now, I want to change the logo. This is a very painful to change logo from 20 places.

Adding a template with just the logo then using that.

So I went, created a new template and added the “Logo” element.
Added an SVG for regular (black lettering, transparent background) and an inverted option (white lettering, transparent background).

On my Header, the background is white, so the regular logo is just as expected.
On the footer however, with a darkish gray background, I’m looking to see the inverted logo.

I saw a couple of options for filter suggested by other users, but it simply DOES NOT WORK.

While begging to Bricks developers to implement a proper site wide logo option, I would appreciate any help in how to make show the logo that has been selected in the “inverted” option. Thanks

[Pete]

On the footer image class, add %root% {filter: invert(1);} to invert from black to white

There’s no reason why that won’t work if applied correctly. If you think it’s right but it’s still not working, drop a link and I can take a look at it for you.

It absolutely, 100% works as I’ve used it on countless websites

[maverick]

Yup that worked. I wasn’t using %root% but the element. Perfect answer, thank you.