DUPLICATE: Logo inverse doesn't change on scroll in sticky header (SVG)

Bugs
1

Bricks Version: 1.5. Beta
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: (a link to a page that illustrates the issue would be really helpful)

On scroll the logo inverse and cart icon don’t change when scrolling in the sticky header.

Site:

Video:
https://drive.google.com/file/d/1CXG7f0UvhViit238gAssGRNSPOCT56Fy/view

2

Hi Peter,
Thanks so much for your report!

We already have two reports about the issue. It’s about the SVG that doesn’t change. Using an image instead works, though.

Best regards,
timmse

3

So I guess it will be addressed soon. That’s great.

What the cart icon - It’s probably affected the same way as the logo right?

4

You can influence the cart icon quite easily:

.scrolling #brxe-xzuaax i {
  color: black;
}

The header gets the class “scrolling” as soon as you scroll.

5

Tried to put a PNG image as logo inverse and it still doesn’t work.

6

Hey Peter,
Works for me with 1.5 beta and a JPG / PNG without problems.

Best regards,
timmse

7

Is this being addressed in the RC? I intend to use SVGs.

8

Inverse SVGs? No, unfortunately not.
What you can do right now is add a class to your SVG paths and change the color on scroll:

.yourSVGClass {
  fill: blue;
}

.scrolling .yourSVGClass {
  fill: red;
}

This way, you have only one SVG instead of two.

Best regards,
timmse

9

Bricks 1.5.1 RC doesn’t seem to work with JPG/PNGs atleast not for me.

10

@OhJey

1 Like
11

Is this going to be addressed in a future update?

12

Hi Chris,
Welcome to the forum!

We’ll address this issue of course in a future release. For now, it’s easy to fix with custom CSS.

Best regards,
timmse

1 Like
13

Thank you so much! :pray::zap::fire:

14

For me it doesn´t work with PNG either. Any solutions for that?

15

Hey, Welcome to the forum!
Is it possible that we are already in contact by email? :wink:

16

Thanks! :slight_smile: No, this is a new issue for me. Tried with SVG and it didn´t work. So I changed to PNG hoping it would be an SVG-problem. Still doesn´t switch between the files.

17

With SVG it’s a known issue, with PNG I cannot see a problem. Can you send me a live link where I can see the issue?

1 Like
18

Sure, here is the link: https://kraftverket.shiki.co/

And here is a screenshot from the logo settings.

Skärmavbild 2023-03-13 kl. 10.35.57
Skärmavbild 2023-03-13 kl. 10.35.57866×1470 86.8 KB

19

What plugin are you using to get your images converted to webp?

Obviously, this changes the logo element (there is a picture tag around it and a <source> tag, which causes it to stop working. If I remove the <source> tag it works.

1 Like
20

Thank you so much! :smiley: That was it! It was the plugin Ewww image optimizer that had the webp option enabled. Thanks again! :raised_hands:

1 Like