Sticky Header Pro - Responsive Toggle Image

[cjohnwalsh]

Hi guys,

Hope you are safe and well.

I have created a custom header in X Pro. I have a Modal, within a Container.

My header is Sticky, with a heigh of 200px, Absolute, and has a Trigger Offset of 1 and Shrink Amount of 0.7.

I have set a background image for the Toggle.

What I’d like to happen is when the user scrolls down, the image shrinks with the rest of the bar.

I can’t get the image to resize. I have set the Toggle Flexbox Direction to Column, Vertical Alignment to Center and Horizontal Alignment to Center. I have also set the image Max Width to 100%.

I have tried using a scrolling effect to resize the Modal but it doesn’t work consistently.

I have included 2 images below to show the effect that I’m trying to achieve. The first image shows the page before scrolling. The second image shows the page after scrolling. I create an Image to the left of the Modal that does re-size when I scroll to show you that the bar is re-sizing.

Thanks,

Chris

[ruenel]

Hello Chris,

Thanks for writing in!

You can apply the Transform Effects for your Modal element with the following settings:

If this does not work, we would like to check your custom header settings. 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

Regards.

[cjohnwalsh]

Hi @ruenel,

Thanks for your quick reply. Really appreciate your help.

I have applied those settings and I’m having some issues with the transformation.

I applied the settings exactly the same as your screenshot but when I view the page using Safari on my iPad Pro, I start scrolling and nothing happens until I scroll to the very bottom of the page and back to the top.

Also, when the transformation is applied, the Modal function no longer works.

I don’t have any plugins installed so nothing deferring the loading of JS or CSS.

Would you mind taking a look please? I’ll create a private post with login credentials now

Thanks,

Chris

[friech]

Hi Chris,

Thank you for the credentials, it would be better if you create a separate sticky bar.
This way you can customize the sticky bar separately from the static top bar. This way has also a smoother transition effect, than the one you currently have.

You can duplicate your current bar, and set it to not sticky. Then configure the duplicate bar as how you want your sticky bar needs to be.

Cheers,

[cjohnwalsh]

Thanks @friech.

I will give that a try now

Thanks,

Chris

[tristup]

Hi Chris,

Please let us know how it works for you.

Thanks