[Resolved] Merging header and navigation in GP Premium

[NBC]

Not to be dense, but I’ve read this support documentation several times and cannot find some of the corresponding settings in GP Premium. Additionally, the UI of the Page Header add-on looks very different from the Customizer setup in Premium.

What am I missing here, besides the proverbial boat?

[Leo]

Hi there,

Can you make sure both GP (1.3.41) and GP Premium (1.2.92) are both up to date?
Let us know.

[NBC]

Can you make sure both GP (1.3.41) and GP Premium (1.2.92) are both up to date?

Absolutely.

Version parity is the first thing I always verify.

The documentation examples do not look like the Customizer screens I see.

[Tom]

The Page Header options aren’t in the Customizer. You can find them when adding or editing a new page/post. More information here: https://docs.generatepress.com/collection/page-header/

[NBC]

Hi, Tom:

I wasn’t looking for a page-specific solution. Sorry that I misunderstood.

What I’m trying to accomplish is easier to describe than to do, I’m afraid.

I’m trying to stack a logo atop a right-side menu, and have all the page or post content start at the top of the window next to that sidebar.

Here’s a simplified example.

I can accomplish all of this except for the vertical position of the content.

[Tom]

Ah, so assuming the navigation is already set to a sidebar, upload a navigation logo in Customize > Layout > Primary Navigation.

It should appear above your sidebar menu.

Then you can hide the header with some CSS:

.site-header {
    display: none;
}

[NBC]

I originally inserted the logo in Site Identity. I moved it to Primary Navigation. Now it’s no longer showing up. Everything else is working.

Any place in particular that I should look for the problem? This is running under localhost, so I can’t post a link.

I have set Navigation and Inner Navigation widths to “Contained,” if that helps.

[Tom]

Make sure the navigation logo position is set to Sticky + Static.

[NBC]

But now the logo’s in the menu instead of above it.

[Tom]

That’s the easiest way to get that kind of look.

The alternative is removing the navigation logo and adding in a logo using GP Hooks in the “Before Left Sidebar Content” hook:

<div class="sidebar-logo">
    <img src="URL TO YOUR LOGO" alt="" />
</div>

Then this would be your CSS:

.site-header {
    display: none;
}

@media (max-width: 768px) {
    .site-header {
        display: block;
    }
    .sidebar-logo {
        display: none;
    }
}

[NBC]

Thanks, Tom!

You know what they say about “careful what you wish for”?

Now I either have to scrap the whole idea or find a way to make the logo sticky.

Worse yet, I did not realize that sticky menus reverted to a menu bar across the screen even if the primary nav was set to fall in the sidebar.

<sigh>

Back to the drawing board.

[Tom]

If you choose the “None” option for the sticky navigation effect, the sidebar nav will stay in the same position and not revert to a horizontal nav.

[NBC]

Thank you, Tom!

I would love an option that retains stickiness and also keeps the nav system in a sidebar. For now, I’ve gotten where I was trying to go in this test.

[Tom]

That is possible as long as the sticky effect is set to “None”.

Glad you got something working 🙂

[Sri]

I am sorry to be so newbie, but I keep reading, use this CSS code, whenever people ask for a solution.

What really lost me is WHERE exactly do you put the css code in the page?

I am using GP Premium 1.2.96 and Elementor. (still in the very early stages of learning 🙂 )

Also, what are GP hooks? How do we use them? When do we need them?

Btw. I am also trying to get a transparent header with some text on it for the page I am building. I am still grappling in the dark now, not sure how to achieve that.

I’d be grateful if someone can point me to the right direction.

Thank you,

[Author]

Posts