[Support request] Best way to add post title and meta into sticky header

Home Forums Support [Support request] Best way to add post title and meta into sticky header

Home Forums Support Best way to add post title and meta into sticky header

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1427646
    Junior Gong

    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?

    #1428047
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.