[Resolved] Merge navigation and custom element header

[Greg]

I’m trying to merge the primary navigation and header (which I’ve created using an Element). I can’t get the nav to overlay on the header image. I’d also like the nav to be on the left and the logo on the right.

This is what I’m aiming for. https://cln.sh/r3wv4Q

What am I missing?

Thank you

[David]

Hi there,

1. Add this CSS to reverse the logo / menu layout:

.main-navigation .inside-navigation {
    flex-direction: row-reverse;
}

.main-navigation.nav-align-right .navigation-branding {
    margin-right: unset;
    margin-left: auto;
}

2. For the merged header – create a header element:

https://docs.generatepress.com/article/header-element-overview/

You’re not going to add anything to the Page Hero tab.
On the Site Header tab, simply enable the Merge with content option.
This will provide options to change the site header and navigation colors – which will only apply to the areas you set in the Elements Display Rules … this allows you to override the Customizer Settings for those specific pages.

[Greg]

The first item worked perfectly. Thank you.

I’m confused on the second item. I have a header element already which is using the page’s featured image as the hero background. Do I create a second header element, or is this in place of the one I’m using now?

[David]

If you already are using a Header Element then you simply need to enable the Site Header > Merge with Content option and adjust the site header / navigation colors to suit on your existing Element.

[Greg]

I have Merge with Content set to “merge” and I still have the page background showing behind the navigation. https://cln.sh/jBYewS

Should I have “Use navigation as header” set? I’ve removed all the custom CSS I’ve put in, but no luck. I think I’ve tried all the combinations except the correct one!

[David]

Do you have any other hook elements as you have an additional DIV element with a class of site-wrapper being inserted into the code, which is breaking the merged header?

[Greg]

I added a containing wrapper, using the steps here: https://docs.generatepress.com/article/adding-a-container-wrapper/ in order to to try and add a background to the whole site (to obtain the thin line stripes shown here: https://cln.sh/r3wv4Q).

I’ve removed those two elements and the navigation and header are now merging.

Is there a way to achieve this background over the whole site? If I add it to the body tag I don’t see it.

[David]

Aah ok – sorry i didn’t spot it earlier.

You could try keeping that method, accept on the first hook that uses: before_header change the priority to 0
That should fix the issue…

[Greg]

That did the trick.

Thank you very much David!

[David]

Glad to be of help

[Author]

Posts