[Resolved] Merge content with menu

[TeckChew]

Hi

I am trying to create a transparent header menu – content merging with the header. I followed the instructions in https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements but I am unable to get it to work.

I am using Beaver Builder with GP Premium 1.7.8

These are the things I did:
1. Created a primary navigation – Customize>Layout>Primary Navigation
2. Created a Header Element called HDR and enabled Site Header Merge Content. Display Rules>Location> Business Broker Page
3. On the Business Broker Page(which is also my Front page), I have disabled Header and Top Bar in Layouts>Disable Elements

Could you advise where did i go wrong. Thanks.

Regards
TC

[David]

Hi there,

for the Header Element to work there must be something in the Hero Content. If you have no content for the header element then just add a HTML Comment eg.

<!-- Merged Header -->

Thus won’t display on the front end

[TeckChew]

Hi David

Can you be more specific. I have followed the instructions to a T as per your doc https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements

In the doc no mention that Hero Content is required. How do I check whether I have a Hero Conent.

Regards
TC

[David]

Can you change the Display Rules to Front Page

[TeckChew]

Changed the Display Rule to Front Page same result.

If I tried to add <h1>Text</h1> to my HDR (header) element, there will be a junk of white space between my menu and the plane background image.

my site is bizsupermart.com

Regards

[David]

If you:
1. add the HTML comment as i mentioned above
2. Remove any padding that you have in the header element
3. On Site Header tab remove any value you have in the Offset Site Header Height

With the site header merged you can edit the colors for the header and the navigation on the Site Header tab

[TeckChew]

Hi David

Whether it is “<!– Merged Header –>” or <h1>text</h1>, it will insert a junk of space between the menu and the background image.

My original settings have no paddings nor any value in the Elements>Site Header

Regards

[David]

Right so how the site is now is correct as the header wrap is in place and its merged.
You just need to edit the Navigation Colors in the Header Element > Site Header > Navigation colors. Set them to transparent and you will see the background behind them.

[TeckChew]

Thanks!

[David]

Glad we got there 🙂

[TeckChew]

I am happy that I can get it solved all within a short time. Thanks once again, David.

[David]

You’re welcome

[Author]

Posts