Merge page content into the header

Transparent headers are very popular in web page design. The header "transparency" means that the page header is merged with the content in the same background image or background video, such as in this screenshot. 

Figure 1 Nav Right header merged with page content

Figure 1: Merged Nav Right header and content on a large screen

Here's one easy way that you can do this with Beaver Builder theme and Page Builder, using the example shown here. Here's an overview of how it's done:

  • Create your header in Beaver Builder Theme.
    Let's assume that you only want this header effect to appear on your home page, so you should choose a header layout in the first task that works for the other pages on your site also.
  • Create a row with a background image and content in Page Builder.
  • Use CSS to move the page content up to the top of the page, make the header background transparent, and stack the header on top of the page content so it's visible. In this example, the transparent header will be used on both large and medium devices.

Task 1: Create your header and page content

First, create the header in Beaver Builder Theme. Create the header with a layout and style that will look good on the other pages in your site. In this example, we'll create a heading with a brown background that will look like this screenshot.

Figure 2: First create a Nav Right header and content row.

And it will look like this on pages other than the home page.

Figure 3: In this example the effect will apply to the home page only, so other pages have a standard Nav Right header.

Here's how to create these two views in this first task. If you haven't already created a menu and associated it with the Header area, see the Related Article about the Header tab for how to do it.

Beaver Builder Theme configuration:

  • Go to Appearance > Customize > Header > Header Layout.
    Set the layout style to Nav Right.
  • Go to Appearance > Customize > Header > Header Style
    Set the background color to brown.
    Set the Link Color and Hover Color to white to style the menu.
  • Go Appearance > Customize > Header > Header Logo to add a header logo or text. In this case, the header logo is an image file that includes both a logo and text. 

Page Builder:

  • Create a row with a background image. 
    Note: Set the background image is set to Scroll, not Fixed.
  • Add a Heading module to the row, and center the heading on the Style tab.
  • Create two columns underneath the heading, and in the second column add a Text Editor module.
  • Edit the row, and on the Advanced tab adjust the top padding to create more vertical space above athe content to make room for your header.
    Add some bottom padding to balance it out if you wish.
  • Publish the page or save as draft.

Task 2: Add CSS to move the page content up and adjust the header

CSS is required to change the layout in Figure 2 to that in Figure 1. Since the CSS applies to both the header (theme) and page content (plugin), you'll place the CSS in the area for custom CSS code in the theme.

  1. Copy and paste the CSS below. 
    Refer to the article on where to put CSS code.
  2. Tweak the settings as described in the notes below.
/* Move the page content up to cover the header */
/* Sized for default small device breakpoint of 768 px - change this value if you have a custom breakpoint */
@media (min-width: 768px) { 
  .home .fl-page-content {
     margin-top: -182px; /*Adjust depending on the height of the header for medium devices*/
}
/* Stack the header on top of the content and make the background transparent */
  .home .fl-page-header-primary {
     position: relative;
     z-index: 3;
     background: none;
  }
}
/* For large screens, change the margin-top value to accommodate the narrower heading */
@media (min-width: 992px) {
  .home .fl-page-content {
    margin-top: -116px; /*Adjust depending on the height of the header for large devices*/
  }
}

Notes on the CSS:

  • The min-width setting in @media makes the rules apply only to medium ( > 768 px) and large ( > 992 px) screen sizes. If you have set a custom medium device breakpoint in Page Builder Tools > Global Settings, change the min-width value in these rules to match your custom value..
  • The negative number for the  margin-top setting moves the page content upwards. Adjust these values to completely cover your heading height. 
  • The  position: relative and z-index: 3 ensures that the header will appear over the page content, not under it.
  • The  .home class sets the rule for the home page only.
    If you want this effect to happen on every page, remove  .home from both rules. in that case, you could save the content row that blends into the heading as a saved row or a page template. 
    If you want the rule to apply to a landing page other than the home page, you can use the class for the page ID instead of the .home class, for example:
.page-id-13 header.fl-page-header-primary {

Why do you need two rules, one for medium devices and one for large screens?

It's because of the default behavior of Beaver Builder Theme headers. As the screen width goes from large screen to medium and small devices, the header type changes from Nav Right to Nav Centered, as you can see in this screenshot:

Figure 4: The merged header and content on medium-sized devices.

You can see that the Nav Centered header takes up more vertical space than the Nav Right header, so the rule for the medium device has to have a bigger margin-top offset for the medium-sized device. 

Why does the header rule appear only for medium devices?

Because of the way the rules are ordered, with the smaller min-width value first, the first rule applies to all screen sizes over 768 px, which means both medium and large screens. The second rule, for min-width 992 px, only contains the settings that override the first rule, which means a smaller margin-top value.