[Resolved] Make site title sticky with sticky navigation

Home Forums Support [Resolved] Make site title sticky with sticky navigation

Home Forums Support Make site title sticky with sticky navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2594663
    Ben

    Hi,

    I’m using a sticky navigation, but the site title disappears as soon as it switches to sticky navigation. Can I make it part of the sticky navigation?

    Thanks!

    #2594951
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the page in question?

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know 🙂

    #2642310
    Ben

    Hi,
    thanks for your reply. Sorry, I had lost track of the topic – but still need help on the issue.

    What I want is .main-title to be part of the sticky navigation, so it stays visible with the navigation when scrolling down.
    I am adding a link to the page mockup in the private info as suggested.

    Thank you!

    #2642378
    Fernando
    Customer Support

    Hi Ben,

    Try adding this Snippet:

    add_filter( 'generate_sticky_navigation_logo_output', function( $output ) {
        $title = '<div class="sticky-navigation-title">Your Title Here</div>';
    
        return $output . $title;
    } );

    Insert your title in the code.

    Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

    #2642457
    Ben

    Thanks for the quick answer.
    I’ve tried and see no change.

    I installed the Code Snippets plugin, added the snippet, told it to run everywhere, see here: Code Snippet

    [Edit] I’ve tried to add an imgur-Link with a screenshot of my code snippet, seems not to work. Anyway, I’ve done as explained.

    #2642689
    David
    Staff
    Customer Support

    Hi there,

    Fernandos code will only work if the sticky nav has a logo. Instead you can:

    1. Add this PHP:

    add_action('generate_inside_navigation', function(){
    ?>
    	<div class="sticky-brand site-branding">
    	<p class="main-title" itemprop="headline">
    		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    	</p>
    </div>
    <?php
    });

    It will return the site title you have in your Customizer.

    2. Add this CSS:

    .sticky-brand .main-title a {
    	font-size: inherit;
    	font-weight: inherit;
    }
    .sticky-brand {
    	margin-right: auto;
    }
    .main-navigation:not(.is_stuck) .sticky-brand  {
    	display: none;
    }
    #2645545
    Ben

    Exactly what I wanted, works perfectly!

    Thank you.

    #2694283
    David
    Staff
    Customer Support

    Glad to be of help

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