Streaming live at 10am (PST)

Hover header to turn white... How to?


#1

Anyone know how to create a header similar to Rolex.

Key requirements:

  • Fixed header (shrinking animation not necessary in my case)
  • Transparent header version on landing (with white icons and text)
  • Hover to turn the bg color of the header to white (icon and text come back to color)
  • Scroll down, header change to white bg color version
  • Scroll up back to the top, header returns to transparent version

I tried my own version, it looks fine but there are problems happening when scrolling up and down as it is just a workaround.

http://trans-header-test.webflow.io
And here is the Read-Only: LINK


#2

Hi~ Anyone can provide some tips? :pray:t2:


#3

Hey Anthony,

The link you have provided is for the published site.

Can you provide a read only link to the designer.
Hers’s the link how to do:


#4

hi, here is the read-only link: https://preview.webflow.com/preview/trans-header-test?utm_source=trans-header-test&preview=b966fe7bb94e72cc504a6c6a822f606b


#5

Hi Anthony,

Are you after something like this?
http://navbar-transparent-white-49730e.webflow.io/


#6

Wow, yes, thanks! very similar! :muscle:t2::muscle:t2::muscle:t2:

How did you make it returns to transparent again after scrolling back to top?

There’s a small problem. When the page is scrolled, the bar turns white. But when cursor hovers and moves away, it will returns to transparent even the page is not scrolled to the top yet.

Besides that, we will need to change the color of elements on the nav bar as well as it changes background color, eg. white on transparent, black on white… no idea how to archive this as well.


#7

Hi Anthony,

Had a bit more of a play around. There are some funky things going on with the opacity on the drop-down menu with the Tablet-Mobile view.

http://navbar-transparent-white-49730e.webflow.io/

Here’s the read-only link to view settings/interactions etc:
https://preview.webflow.com/preview/navbar-transparent-white-49730e?utm_source=navbar-transparent-white-49730e&preview=f04e70ef49971e2a878f1818145d2f2f


#8

Hi Knk,

wow! it works very well
It looks like I can understand how did you achieve this. You used an invisible div to trigger the interaction.

Thanks a lot.

The reason why the mobile nav does not work is beacuse “NavbarWhite” is overlaying on top of the burger button. It looks like not a easy fix. But anyway, it’s so great that the sample inspired me.


#9

Hi Anthony,

Good stuff, glad I could help.

regards,
Keiran