Site logo

Archived topic

Add text next to logo - Styling Header / Main menu bar

1 reply · Started by Rolf on December 28, 2020

Viewing posts 1–2 of 2

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.

This archived topic is closed to new replies.