[Resolved] sticky nav branding type site title for desktop

[Tyler]

When I go to select sticky nav, it only prompts an image for the logo spot.

When I go to layout > header > mobile header (on) > it prompts a “branding type” (which i love <3) between logo and site-title.

I would like a “branding type” box in the following area for desktop: layout > sticky nav > HERE instead of just a “sticky nav logo” image.

Is this going to be a feature in the future? Or possibly some code for me to have it now. 🙂

Thank you!

[Tom]

Hi there,

You should be able to do this:

add_filter( 'generate_sticky_navigation_logo_output', function() {
    return sprintf(
        '<%1$s class="main-title" itemprop="headline">
            <a href="%2$s" rel="home">
                %3$s
            </a>
        </%1$s>',
        ( is_front_page() && is_home() ) ? 'h1' : 'p',
        esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
        get_bloginfo( 'name' )
    );
} );

You will need to upload a sticky navigation logo to initiate the filter.

Let me know 🙂

[Tyler]

Beautiful!

It does make the logo, or site title in this case, float left instead of retaining it’s center position between the nav menu.

Is there possibly another magical filter to do this?

Thank you!

[Tom]

Are you wanting the same exact look as the current header, just not as tall?

I wonder if setting your navigation as the header would be the better way to tackle it: https://docs.generatepress.com/article/navigation-as-a-header/

That way you could remove the filter I provided and just decrease the sticky navigation height.

Let me know 🙂

[Tyler]

Are you wanting the same exact look as the current header, just not as tall?
Yes, although the tall part doesn’t matter to me.

This is currently what I’m doing: https://docs.generatepress.com/article/centering-logo-navigation/

When doing the above, and also wanting sticky, I needed the filter for the logo to be the site-title because there was no choice for branding-type.

Now with your filter applied, it works but positions the branding-type left instead of retaining “centered logo navigation”.

When selecting navigation-as-a-header it appears as it usually would… logo left and menu float right (which is also the same as it’s working as right now for the sticky portion) but doesn’t allow for the branding-type to be centered before sticky nav view takes over.

This would be going backwards because I do WANT the logo to be centered between the navigation for the desktop view and the sticky navigation view.

[Tom]

We can actually make the logo centered when using the navigation as header, and then it would be consistent between sticky/non-sticky.

If you want to set it up and let me know I can provide the necessary CSS.

Let me know 🙂

[Tyler]

Yes please!

Shall I remove the existing filter?

I will revert the site back to the way it was before the centering-logo-navigation article.

Thank you!

[Tom]

Hi there,

Things still look the same right now, but I decided to give it a go anyways.

Keep things the way they are, then add this:

.navigation-stick .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navigation-stick .main-nav {
    width: 100%;
}

[Tyler]

Yes, you beat me to it.

Beautiful, thank you – It works!

I’m bookmarking this. Filter + css code + centered-nav article = da bomb!

[Tom]

Awesome! Glad I could help 🙂

[Author]

Posts