- This topic has 14 replies, 3 voices, and was last updated 3 years, 5 months ago by Tom.
-
AuthorPosts
-
October 4, 2020 at 12:56 pm #1472064Ash
How do I create it?
When I use an Element with entire site condition, sticky header does not work.October 4, 2020 at 1:16 pm #1472073ElvinStaffCustomer SupportHi,
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.
October 4, 2020 at 1:41 pm #1472092AshWhere can I find Merge with Content option for normal header but Element?
October 4, 2020 at 3:00 pm #1472154ElvinStaffCustomer SupportWhere 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.
October 4, 2020 at 4:32 pm #1472212AshI mean this. so the header is like sticky from the moment the page is loaded.
https://share.getcloudapp.com/qGuvgWvrI need the header that’s like always sticky and transparent sitewide.
October 4, 2020 at 8:25 pm #1472317ElvinStaffCustomer SupportTo 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.
October 4, 2020 at 8:40 pm #1472321AshYes 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.
October 4, 2020 at 8:48 pm #1472324AshI see, Use Navigation as Header is close to what I want.
But I’d like to keep the tagline.October 4, 2020 at 8:55 pm #1472327ElvinStaffCustomer SupportI 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/
October 4, 2020 at 9:03 pm #1472333AshHmm, the tagline doesn’t show up with your filter…?
October 5, 2020 at 10:02 am #1473424TomLead DeveloperLead DeveloperYou 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 🙂
October 5, 2020 at 10:32 am #1473459AshCan 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.
October 5, 2020 at 10:33 am #1473461TomLead DeveloperLead DeveloperThe 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.
October 5, 2020 at 8:27 pm #1473929AshThank you.
October 6, 2020 at 9:38 am #1474937TomLead DeveloperLead DeveloperNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.