Correct On scroll Transform settings to get the logo shrinking on scroll

[digitalseeds]

Hey Themeco team,
I’m trying to get the logo to shrink upon scrolling down on my sticky header.
I’ve found this useful resource in the forum, the problem is that eventually the problem has been solved without explaining how to do it. I encounter the same problem as the Pro user: I enter the scroll transform settings on the logo that are given in the post, but the logo doesn’t shrink. It seems it always stays in the Exist state.
Can you please share the correct settings? I’m fine to fine-tune it myself, I’d just need to see the effect working first.

Thanks!
Anne-Sophie

Shrink Sticky Header On Scroll

Hello! https://integrity.webraven.net/ How would I adjust the settings in the Header Builder shrink the logo in the top bar on page scroll? Currently, I have both bars pinned as sticky. Thank you, William

[ruenel]

Hello Anne-Sophie,

Thanks for writing in!

An inline element CSS was added to the image element:

.x-bar-is-sticky:not(.x-bar-fixed) $el:is(.x-effect-exit) {
    transform: scale(1);
}

to make sure that the image is always displayed big and not resized upon loading the page.

The above statements were added in the secure note which is why you are not seeing it. If this does not apply to your custom header, we would love to check your site header. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[digitalseeds]

Hey @ruenel, many thanks for your answer.

The CSS code you provided is working, many thanks!
When we scroll up and the bar resizes, we can briefly see a white “background” behind my colored background. Is there a way to add some color to this? I’ve added the secured note. Thanks for your help!

[tristup]

Hi Anne-Sophie,

You can add the color to it by adding the following custom CSS code into the Theme Options > CSS.

.x-site
{
    background: #ff0000
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks