CTA replacing the logo in the navbar when you scroll

Design help General
1

Hi everybody !
i hope you are doing well,

I’m pretty new on Webflow and I would like to create a button (a CTA) that would replace the logo in the navbar on the mobile version when you scroll down after the section 2.

to be clearer: here is an exemple of website that does exactly what I want to do (mobile version) :

Can you help ?

Thank you so much !
Hope to here from you soon !

Here is my site Read-Only: https://preview.webflow.com/preview/greengot-test-1cce3876ea75f3c9eb4d68247?utm_medium=preview_link&utm_source=designer&utm_content=greengot-test-1cce3876ea75f3c9eb4d68247&preview=0386f40aa14d702ffd532b097459dfff&pageId=5e660c2c98761c3b4c2ddb36&mode=preview

2

Hi and welcome to the forum!

This behaviour is easy to make with Webflow, using Interactions.

Basically, you’ll create an interaction trigger on the first section, setting it for when the section leaves the viewport (and the reverse for when it comes back). Then you’ll create an animation inside, targeting an element in your navbar to move it upwards.

I suggest that you create a div in your navbar to contain the two elements that swap. Make them one on top of the other with the one on bottom hidden outside. Then target this div with the IX.

3

Hi @vincent ,
thank you for your answer !
I’m sorry, I’m trying for now more than 1hour but I’m not a developer and not english native, so I didn’t succeed at all…
Do you think you could explain a little more in details the different steps ? It would help me a lot !
Thank you very very much
Maud

4

You don’t need to be a coder, just to understand IX logic. I reckon this can be somehow tough at times.

I can help with this :smiley: Sending you a PM.

5

Hey @Maud

Check this project and it will explain how to do it. It’s not perfect but it will give you an idea.

Here it is:
https://preview.webflow.com/preview/sagars-ultra-awesome-project?utm_medium=preview_link&utm_source=designer&utm_content=sagars-ultra-awesome-project&preview=73adc92a36ea7715806a5fa2af6903c7&mode=preview

Cheers,
Sagar