[Support request] Add text next to logo – Styling Header / Main menu bar

[Rolf]

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.

[David]

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.

[Author]

Posts