[Support request] Use Navigation as header and include a strapline?

[Matt]

I have my site header looking right and now want the sticky menu to show the logo, and for the menu items to have the same horizontal alignment (the sticky appears as full width and not ‘contained’ as per the header).

I tried the use navigation as header option and it got me most of the way there but the strapline is missing on the header (I don’t need it on the sticky) and I need to adjust the logo text size.

Which way is best to achieve this?

[David]

Hi there,

you can add the tag line to the navigation as header using this PHP Snippet:

add_action( 'generate_after_logo' , function() { 
    ?>
    <div class="site-description"><?php bloginfo( 'description' ); ?></div>
    <?php
});

Or you can just add the HTML and PHP to a Hook element:

<div class="site-description"><?php bloginfo( 'description' ); ?></div>

Select the after_logo hook

[Matt]

Hi David, the PHP didn’t work. I’ve not explored hook elements yet – so not sure how to do that.

[David]

Sorry i read logo ….. that won’t work with the Site Title.

Use the code Tom provides here:

https://generatepress.com/forums/topic/site-title-and-site-description-when-i-use-navigation-as-header-and-mobile-on/#post-1138542

[Matt]

Sorry, that’s my poor use of terminology – I meant the site title.

Tom’s code moves the tagline after the site title. I’d like the tagline under the site title but no shown at all for the sticky header. Is that doable?

If this way’s not doable – I can go back to having a header (not nav as header) and then would just need to configure a site title for the sticky – couldn’t find where to add this. Is it a logo image only thing? And then adjust so it’s the correct width (header width = contained and inner header width = full)

[David]

Totally my bad for jumping the gun lol.

Try adding this CSS:

/* Style static navigation */

.main-navigation:not(.is_stuck) .navigation-branding {
    flex-direction: column;
}
.main-navigation:not(.is_stuck) .navigation-branding .main-title {
    line-height: 40px !important;
}
.main-navigation:not(.is_stuck) .navigation-branding .site-description {
    margin-bottom:  10px;
}

/* Remove site description when nav is stuck */

.main-navigation.is_stuck .navigation-branding .site-description {
    display: none;
}

May need to tweak the line-height and bottom margin values

[Author]

Posts