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

Home Forums Support Use Navigation as header and include a strapline?

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1339975
    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?

    #1340089
    David
    Staff
    Customer Support

    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

    #1340153
    Matt

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

    #1340168
    David
    Staff
    Customer Support
    #1340346
    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)

    #1340365
    David
    Staff
    Customer Support

    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

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