Archived topic
Add text next to logo - Styling Header / Main menu bar
1 reply · Started by Rolf on December 28, 2020
Hi,
I am using the latest version of GP and I want to change how the header/primary menu is displayed.
Right next to the logo (left) I want to display some text (a company name in big letters).
Both on mobile/desktop, but if possible only on scroll.
Hi there,
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>My title</p>
</div>
1.2 Select the generate_after_logo hook
1.3 Se the Display Rules to the Entire Site
2. Add this CSS to hide the title unless Nav is sticky:
.sticky-enabled .main-navigation:not(.is_stuck) .navigation-title-container {
display: none;
}
May require some CSS for tweaking the spacing, alignment and styling - i can take a look once the above is done.