Archived topic
Best way to add post title and meta into sticky header
1 reply · Started by Junior Gong on September 2, 2020
Hey guys
I am trying to replicate the sticky header behaviour from discourse forum: meta.discourse.org
When you scroll down in a topic. the sticky header hides the nav icons and displays title + category and tags in sticky header
For an example open this in smartphone view:
https://meta.discourse.org/t/how-to-find-muted-topics-and-make-them-normal/162750
What is the best way to implement this into my GP child theme?
Hi there,
you can use a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
For that position you would want the after_logo hook
And this Code to output title and first category term:
<div class="navigation-title-container">
<div class="navigation-post-title"><?php the_title(); ?></div>
<div class="navigation-category">
<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>
</div>
</div>And this CSS to display it on Sticky only:
.sticky-enabled .main-navigation:not(.is_stuck) .navigation-title-container {
display: none;
}This applies to the Navigation as Header option.
You can of course hook it into other places - if your using the Mobile header for example you can use the inside-mobile-header - the CSS would need updating to suit.
