Hover header to turn white... How to?

Design help General
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

10

The links are broken - any way to still see this?

11

Did you end up figuring this out? I could use some help/example

12

tried, somehow accomplish, but the effect was not perfect and it was removed.

13

Hi Evan,

sorry for very late reply, have been away from forum for sometime.
Did you still need some help?