Pro: Trigger Selector for header appearance as they scroll through the page

[b960a518_a049_4215_9fec_f8e5379ab96d]

I am creating a step by step feature on my sales page

On that page is prices, availability calendar and then the make a booking form

when they have scrolled to the prices- I would like the header to appear that says “take the next step- check availability”

and when they scroll or click to availability- I would like the new header to appear that says make a booking

I can’t make heads or tails out of the trigger selector option

If I set a section on the page ID to say “price” I have no idea how to have the header appear when it scrolls over that ID- any help or documentation would be ideal

[ruenel]

Hello @b960a518_a049_4215_9fec_f8e5379ab96d,

Thanks for writing in!

To accomplish what you have in mind, you need to create a custom header with 3 bars in it. You will have to enable the “Sticky Bar” option and hide some of the bars initially.

And then you will have to input the section ID for the “Trigger Selector” option:

We would love to know if this has worked for you. Thank you.

[b960a518_a049_4215_9fec_f8e5379ab96d]

no it didn’t work for me

[b960a518_a049_4215_9fec_f8e5379ab96d]

If say I add section 1, 2 and 3

lets say I call section 2 “calendar”

and I give it an ID of “cal” (in the customize section)

what exactly do I type into the trigger selector?

also when I scroll back up to the top- do they vanish (which would be good)

[b960a518_a049_4215_9fec_f8e5379ab96d]

I play to have a different header for each section, and position each possibly with z index to cover each header when needed- I don’t know yet- just trying out things

I really wish that you could add additional header bars to the base of the header

[ruenel]

Hello @b960a518_a049_4215_9fec_f8e5379ab96d,

You will need to insert #cal as the Trigger Selector is you have added cal as a section ID.

You need to create one custom header with two or more bars in it. The other bar needs to be hidden initial. It will be shown once the #cal link or the section with the ID is displayed in the screen. If you can provide access to your site, we can create an example for you to get started with.

Regards.