Merging the Header/Navigation & Content

One option our Page Header add-on has is the ability to merge your header & navigation with your page header content.

This works great if you’re using the Page Header add-on to add content, but doesn’t help if you’re using a page builder like Elementor or Beaver Builder to build your page and need to achieve the same effect.

Luckily, we can still use the Page Header to achieve this look, even without using the content area in the add-on.

Build your page

Our first step is to build your page with the page builder of your choice. You should have it all set up with your header/navigation sitting on top of it.

Enabling content options in the Page Header

Even though we’re not using the content area in the Page Header, we still need to enable all of the options that come with adding content. We can do this by adding an HTML comment into the content textarea like this:

<!-- page header -->

Page Header with empty content
Page Header with faux content

Note: Your Content settings should look exactly like the above. The only two things you need to do is add the empty element and set the container type to full width – nothing else.

Setting the container type

Now we want to set the Container type option (shown in the screenshot above) to Full Width.

Merging our header

Now navigate into the Advanced tab, and enable the merging of the header and your content.

Page Header Merged
Page Header Merged

The key here is the Place content behind header (sliders etc..) option. This is what will place our header on top of our page we’ve built using our favorite page builder.Then of course you can style your site title and navigation to look good with the design of your page.