Disable webkit filter on header

yajaarepas · Member · July 17, 2020 at 11:28 pm
Copy link

Add topic to favorites
Hi Taras,
would you be so kind and guide me on how to disable the filter on the header’s logo that makes it black and changes it to white when scrolling down? I need to set a specific image for the header logo (before scrolling) and a different one when you scroll down the page. Black and white filters don’t go with my brand’s color palette.

Thank you!

The blog I need help with is: (visible only to logged in users)
tarasdashkevych · Theme Author · July 18, 2020 at 6:08 pm
Copy link
Hello,

“I need to set a specific image for the header logo (before scrolling) and a different one when you scroll down the page. “
– By default, WordPress does not provide an option to upload an alternative logo but we can try to use a custom CSS to change your logo during a scroll.

Could you please post links to your two logos, so I can test it on my local machine and provide a custom CSS for you?

You can upload your logos to your site media (https://wordpress.com/support/media/) and then share links.

Kind regards,
Taras
yajaarepas · Member · July 22, 2020 at 5:11 pm
Copy link
Oh so nice of you Taras, here are the links to my logos:

Right now the one that appears when you scroll down on the top white bar looks perfect, I just need to set the white logo (or just adjust the hue of the full color logo to make it white) when the scroll is at the top of the page.

One additional question, the image on the first link looks blurry on my screen, but the original file is fine; i think it has to do with the retina display…i’ll appreciate it if you any tips to prevent this from happening.

Thanks again!

Carolina
tarasdashkevych · Theme Author · July 22, 2020 at 6:10 pm
Copy link
Hi Carolina,
Thank you for the links!

“…the one that appears when you scroll down on the top white bar looks perfect…”
– Please add this custom CSS to your site to add an alternative logo:
```
.site-header:not(.scroll-header) .custom-logo-link img {
    display: none;
}

.site-header:not(.scroll-header) .custom-logo-link:after {
    background-image: url(https://yajaarepas.wpcomstaging.com/wp-content/uploads/2020/07/logo_Yaja_inv-1.png);
    background-size: 200px 70px;
    width: 200px;
    height: 70px;
    display: block;
    content: "";
}
```
Note, this custom CSS contains URL to your alternative logo. Also, you can change height and width of your logo (example uses 200px and 70px).

—

“…the image on the first link looks blurry on my screen, but the original file is fine…”
– Could you please make your site public, so I can inspect the issue?

Thank you,
Taras
yajaarepas · Member · July 22, 2020 at 11:49 pm
Copy link
Thanks for your quick response Taras! :)
…– Please add this custom CSS to your site to add an alternative logo:
I added the CSS to my site but it doesn’t seem to do the trick, i don’t know if i’m placing it where it should be. I pasted it on the additional CSS editor.

…– Could you please make your site public, so I can inspect the issue?
My site is currently set to the Coming Soon option but the whole block where i can change my privacy settings is disabled for some reason and i can’t find the way to make it public.
See my screenshot: https://yajaarepas.wpcomstaging.com/wp-content/uploads/2020/07/privacy_settings.png
tarasdashkevych · Theme Author · July 23, 2020 at 5:11 pm
Copy link
Carolina,

If would be great if you could make your site public (https://wordpress.com/support/settings/privacy-settings/), so I can inspect both issues (custom CSS for an alternative logo and the image).

Currently, I cannot access your site or preview the images: https://snipboard.io/k8xzl9.jpg

Thank you,
Taras

No items found.