Create Header Similar to

Hi there,

I am attempting to create a header similar to https://barefootcontessa.com

I want my header to change once to the smaller bar once the user scrolls down, as seen in the link above. I am not quite sure what this is called, so I was unable to search the forum for it. I apologize if this topic has already been discussed!

I am using X Pro.

Thank you!

Hi @zachary_weisenthal,

Thank you for reaching out to us. This can be done quite easily using Pro, first create two bars, in the first Bar create the normal header you would like to show when the site loads. In the second Bar create a smaller version of of your original header:

image

Inspect your first Bar and make sure the Sticky Bar option is turned off:

image

Inspect your second Bar, turn on the Sticky Bar option and also turn on the Hide Initially option (see screenshot)

This will give you the on-scroll changing header effect. Cheers!

Thank you so much for your help!! Have a great weekend!

Glad that we could be of help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.