Recreating Nice Header

Hello Forum,

Any ideas how you would go about re-creating this header in Webflow as you scroll down: Badrutt’s Palace | Luxury Hotel | St. Moritz | Switzerland

As you scroll:

  • The background fills in almost immediately after scrolling
  • The links on the right change colour to contrast new background colour

Do you have two versions of the same header? This may look glitchy as one fades in over the other.
Or do you separate the components of the header and control them with interactions?
Different header entirely for responsive version?

Any ideas/suggestions/solutions very welcome.
Cheers!

Rob

You can fake this by creating a nav bar, then duplicating it to be fixed. Then change the background color and link color to what you want. Then apply a scroll interaction to it, though you may need to tweak the settings a lot to get it to fade in right away like that. Custom code might help as well. I suggest searching the forums for quick navbar scroll interaction.

Hi @DFink,

Thanks for responding. This is where I am with it http://solverde.webflow.io/ (just in wireframe mode right now). What do you think?

There is only one header but there is a ‘background’ part of the header which i’ve given a class which appears as a scroll interaction based on the hero section’s position. The 'background also includes different coloured copies of the links on the right-hand side. So there is two steps to the interaction: 1) the background colour’s opacity and 2) nav links display setting.

Seems to work ok in general but bit sketchy when testing.

Rob

1 Like

Looks good! I think you figured it out

1 Like

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