How do you use the inverse logo?

How To
1

I can’t see any options to use the inverse logo…

I’m trying to have a transparent header with a light colored logo, and a sticky menu on scroll with a dark colored logo - but I have no clue on how to get this. I thought the inverse logo option was my saviour, but I can’t see how to use it …

2

Hi Martin,
If you have defined an inverse logo and using the logo element together with the sticky header option, it changes accordingly.

Take a look here (and please don’t pay attention to how ugly everything looks - the uglier the better to test) using 1.4beta: https://vimeo.com/702957099/96b35adad0

Best regards,
timmse

1 Like
3

Okay. Doesn’t work in 1.3.7.

Hope 1.4.0 is out of beta soon then…

4

i’m running 1.4rc now, but it’s still not working.

what am I doing wrong???

https://watch.screencastify.com/v/Iip6eLPZPdleHet67LQa

5

It worked in the beta, but unfortunately, not in the RC :tired_face: But I t’s already on the list :v:t2:

6

not working in rc2 either :slight_smile:

7

yeap that’s how I use it too. what I normally did on the first website I built is that the main logo contains a lot of green variations and what I did for the inverse logo in photoshop I changed it to a white color logo with a darker background. But im using 1.3.7 version i have not installed the newest versions on it.

8

Correct Martin, the fix didn’t make it into 1.4 RC2 :love_you_gesture:

9

didn’t make it to 1.4 final either it seems :confused:

1 Like
10

Hi Martin, no unfortunately not - but for 1.4.1 I am confident :slight_smile:

11

Hi!

One of my project i try to use it, but not working in 1.5.1 version.

12

hey there, still not working in 1.7, right? Please consider to fix it in 1.7.1, please!!!

13

New to bricks just lurking a bit in the forum, till this is fixed I figured you could try using css filters to target the logo after scroll. This will of course highly depend on the type of logo you got but wanted to share just in case.

using filter: brightness(0) invert(1); on the bricks logo would look like this:
image

Personally I always use SVGs for logos so if you’ve got that, you could always change the color of the svg or even individual paths by targeting the svg with the .scrolling class like so:

svg { fill: red;}
.scrolling svg { fill: blue;}

hope it helps someone till the feature is fixed :slight_smile:

EDIT: another way would be to create a relative positioned div set to the dimensions of the logo, inside add both logos with position absolute so they are on top of each other. Then just add a css transition and change the opacity of each logo from 0 to 1 and 1 to 0 depending on whether the header has the .scrolling class or not

14

1.7.2 not working…
any news on this?

15

Still in progress,
But the solution I posted in the related bug thread back on July 22 is still valid (it’s the same that Martin mentioned above):

16

Any news on this? :pray: The temporary solution is not working for me ;/