Merge Page Content Into the Header

It’s currently popular in web page design to merge the page header with content in the same background image or background video, like the example in this screenshot.

Screen shot of a header merged with the background image.

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

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

  • Create your header in BizTek Pro 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 BizTek 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 BizTek Pro 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.

Screenshot of a brown background header.

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

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

Screenshot of a brown header background on another 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.

BizTek Pro 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.

BizTek 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. Go to Customize > Code > CSS Code.
  2. Copy and paste the CSS below.
  3. 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 BizTek 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 BizTek Pro 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:

Screenshot of a medium screen with Nav center and bigger margin-top offset.

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.