[Resolved] Transparent & sticky header sitewide?

[Ash]

How do I create it?
When I use an Element with entire site condition, sticky header does not work.

[Elvin]

Hi,

You can set the transparency of header through Appearance > Customize > Colors > Header.

The color picker allows you to set it’s alpha (opacity).

If you’re using a custom header, you may have to use custom CSS w/ rgba() as background-color values so you can set its transparency.

[Ash]

Where can I find Merge with Content option for normal header but Element?

[Elvin]

Where can I find Merge with Content option for normal header but Element?

I’m not sure what you mean by this. Can you give more details? Thank you.

[Ash]

I mean this. so the header is like sticky from the moment the page is loaded.
https://share.getcloudapp.com/qGuvgWvr

I need the header that’s like always sticky and transparent sitewide.

[Elvin]

To clarify, what you’re trying to do is merge the page hero w/ the header nav and keep the nav sticky for the entire site?

Something like this? demo site

For the sticky part:

You can make the header navigation sticky by enabling it on Appearance > Customize > Layout > Sticky Navigation.

For turning the header navigation transparent:
You can set the alpha values of the header’s background color so it appears transparent as mentioned on the previous reply.

As for merging the normal header:
I’m still not sure what you mean by this. Perhaps you meant merging the navigation with the normal header.

To do that, you can go to Appearance > Customize > Layout > Header and check Use Navigation as Header.

Also, making your Header Element merge shouldn’t interfere with the sticky effect. What’ll happen is it will detach itself from the merged header and stay sticky.

[Ash]

Yes similar to the demo site you linked.

When merged header enabled with an Element, content should start from top 0px means part of content can overlap(underneath) with the header.

I may be able to create this with position:fixed attribute but I asked you if there’s built-in option.

[Ash]

I see, Use Navigation as Header is close to what I want.
But I’d like to keep the tagline.

[Elvin]

I see, Use Navigation as Header is close to what I want.
But I’d like to keep the tagline.

You can keep the setting and just add the timeline by adding this PHP snippet.

add_filter( 'generate_site_title_output', function( $output ) {
    $tagline = '<div class="site-description">Your tagline here</div>';

    return $output . $tagline;
} );

Reference: https://docs.generatepress.com/article/navigation-as-a-header/

[Ash]

Hmm, the tagline doesn’t show up with your filter…?

[Tom]

You can use position: fixed like you mentioned, or let the theme do it for you with these options: https://docs.generatepress.com/article/transparent-header-and-navigation/

Let me know if that helps or not 🙂

[Ash]

Can Header Element inherit sticky setting from regular header? or it has a setting for itself?

If it can’t be sticky, I will use position:fixed.

[Tom]

The sticky navigation option in the Customizer doesn’t care if it’s a merged header or not – it should work the same as any other page.

[Ash]

Thank you.

[Tom]

No problem 🙂

[Author]

Posts