[Resolved] Transparent & sticky header sitewide?

Home Forums Support Transparent & sticky header sitewide?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1472064
    Ash

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

    #1472073
    Elvin
    Staff
    Customer Support

    Hi,

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

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

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1472092
    Ash

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

    #1472154
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1472212
    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.

    #1472317
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1472321
    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.

    #1472324
    Ash

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

    #1472327
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1472333
    Ash

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

    #1473424
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #1473459
    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.

    #1473461
    Tom
    Lead Developer
    Lead Developer

    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.

    #1473929
    Ash

    Thank you.

    #1474937
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.