[Resolved] Transparent/appearing header

[Tom]

Hey Gang,

It’s been a while. I’ve been trying to promote GP in Facebook WP Groups when I can.

That brings me to my question: transparent headers that appear when scrolling

It’s a popular design feature, and I can’t find anything on it anywhere.

Here is an example:

https://doorforce.flows.cc/

This forum has the best service/advice from any theme I’ve ever encountered.

[Leo]

Hi there,

That layout can be replicated with this method:
https://docs.generatepress.com/article/merging-the-page-header-site-header/

Then you can set custom navigation color for that page header:
https://docs.generatepress.com/article/merging-the-page-header-site-header/#custom-navigation-colors

Then the sticky navigation color will inherit the setting from the customizer.

Page header will be replaced by the new Header Element module starting next Monday though:
https://docs.generatepress.com/article/header-element-overview/

We are currently in release candidate 3 so it’s stable enough if you want to start using it:
https://docs.generatepress.com/article/beta-testing/

You can of course wait for the official version to be released then manually migrate over as well.

Let me know if this helps 🙂

[Tom]

Greetings!

No idea where to merge the page and header lol. GREAT option, though. It looked terrible having a gap between a hero video and the header.

[Tom]

Found it! New feature I hadn’t used yet. Brilliant!

[Tom]

I guess I missed the boat entirely here.

I land on the page, and the header is transparent. The logo lays on the background, and the nav menu float right.

When I scroll down, the sticky header changes to a white background.

I guess I didn’t fully understand how to achieve that with a page/site header merge.

[Tom]

When you have a transparent header, the sticky navigation will continue to use your regular navigation colors. This is because you wouldn’t want a transparent sticky navigation as you scroll down the page (it would be difficult to see the text).

Let me know if that makes sense or not 🙂

[Tom]

Makes perfect sense! Executing it is where I’m falling short 🙂

[Tom]

Found it, guys!

[Author]

Posts