[Support request] Write CSS for title and sub title in sticky menu

[Jennifer]

Hello Support,

After reading through your support forum I found how to add some PHP to show the Site Title on the sticky menu next to the logo, I would also like to add the sub title of the site and write some CSS to change the font size, weight and colour of the site title and sub title.

The code I have used is:

add_filter( ‘generate_sticky_navigation_logo_output’, function( $output ) {
$title = ‘

Your Title Here

‘;

return $output . $title;
} );

[David]

Hi there,

you would need to include some HTML and CSS Class attributes in that PHP Snippet.
For example:

add_filter( 'generate_sticky_navigation_logo_output', function( $output ) {
    
    $title = '<div class="sticky-subtitle">You text here</div>';
    
    return $output . $title;
} );

Now you have the sticky-subtitle class to add your styles:

.sticky-subtitle {
     font-size: 14px;
     font-weight: 600;
     color: #f00;
}

[Jennifer]

Thanks David,

This is perfect and working well except now I need to add a line break so that the title and subtitle are on seperate lines.

I’m sure it is simple but I haven’t resolved it yet.

Jen

[David]

Can you provide a link to the site so i can see this?

[Jennifer]

Sure the site is in a temp environment at the moment but you can see what I have done in the link
Thanks you

[David]

Ok so i assume you have also filtered in the sticky-navigation-title. If so then we just need to nest the div.sticky-subtitle inside the div.sticky-navigation-title like so:

add_filter( 'generate_sticky_navigation_logo_output', function( $output ) {
    
    $title = '<div class="sticky-navigation-title">
            Your Title Text
            <div class="sticky-subtitle">Your Subtitle text</div>
            </div>';
    
    return $output . $title;
} );

[Jennifer]

After adding in the CSS for align left it is perfect, thank you!

I’ve learnt something about PHP 🙂

[David]

Awesome – really glad to hear that!!

[Jennifer]

I’ll be applying these changes to several sites and learnign so much about the flexibility of the theme!

Thank you again 🙂

[David]

Thanks for the kind feedback 🙂

[Author]

Posts