The basics would be this:
1. Create a new Hook Element
1.1 Add this for your Hook Content:
<div class="navigation-title-container">
<p class="main-title">My Title</p>
<p class="site-description">My Description</p>
</div>
1.2 Select the generate_after_logo
hook
1.3 Set the Display Rules to the Entire Site
2. Add this CSS through Appearance > Customize > Additional CSS to hide the title and description from the Hook unless Nav is sticky:
.sticky-enabled .main-navigation:not(.is_stuck) .navigation-title-container {
display: none;
}
It may require some CSS for tweaking the spacing, alignment, and styling – I can take a look once the above is done.
Alternatively, you can use a Block Element – Hook instead of a Hook Element so no CSS would be needed.