[Resolved] sticky nav branding type site title for desktop

Home Forums Support sticky nav branding type site title for desktop

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1274367
    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!

    #1274578
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1276146
    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!

    #1277007
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1279764
    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.

    #1280007
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1281367
    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!

    #1281717
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #1282748
    Tyler

    Yes, you beat me to it.

    Beautiful, thank you – It works!

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

    #1282810
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad I could help 🙂

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