Site logo

Archived topic

Make site title sticky with sticky navigation

7 replies · Started by Ben on April 3, 2023

Viewing posts 1–8 of 8

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!

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!

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

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.

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;
}

Exactly what I wanted, works perfectly!

Thank you.

Glad to be of help

This archived topic is closed to new replies.