In this tutorial, introducing how to create the full height hero banner before header with sticky site header. Header will display at bottom. After scroll header will be stick at top.

Method 1: Themer Part & Beaver Theme Header

Minimum Requirement:

Make sure that you already installed the following tools on your site.

1. Beaver Theme
2. Beaver Builder Plugin
3. Beaver Themer addon

Creating full height hero banner part using Beaver Themer

1. Navigate to Builder -> Theme Layouts
2. Click on Add New button
3. Enter title
4. Type is “Theme Layout”
5. Select “Part” from layout drop down
6. Click on “Add Theme Layout” button
7. You will redirect to next page
8. Find Themer Layout Settings section
9. Select “Page Open” position
10. Set the location as per your requirement
11. Click on Launch Page Builder button
12. Create a full height hero banner
13. Add ID “bh-hero-banner” into parent row. Hover on the row, click on rench icon, go to Advanced tab and enter bh-hero-banner into ID input field.
    
14. Click on Done button and then publish the layout.

Creating fixed header

1. Click on Appearance -> Customize sub menu
2. Click on Header Panel
3. Click on Header Layout section
4. Select “Fixed” from Fixed Header drop down
5. Click on Save & Publish button

Creating new JS file

1. Create a folder “js” into your child theme folder if it is not there.
2. Create a new file “bh-hero-banner.js” and add the following code

bh-hero-banner.js file

(function($){
  
  if( $('.fl-builder-content #bh-hero-banner').hasClass('fl-row-full-height') )
  {
  	$('body').removeClass('fl-fixed-header');
  	var headerHeight = $('header.fl-page-header').height();
  	var height = $(window).height() - headerHeight;
  	$('.fl-builder-content #bh-hero-banner').css('height', height);

	$(window).scroll(function(){
		if( $(window).scrollTop() >= height ) {
			$('body').addClass('fl-fixed-header');
			$('.fl-page-content').css('padding-top', headerHeight);
		} else {
			$('body').removeClass('fl-fixed-header');
			$('.fl-page-content').removeAttr('style');
		}
	});
  }
})(jQuery);

Enqueue JS file

Loading the new JS file “bh-hero-banner.js” on the site using wp_enqueue_scripts hook. Open the function.php file and add this snippet at end of the file

Enqueue the scripts

add_action( 'wp_enqueue_scripts', 'frame_before_header_hero_banner_scripts' );
function frame_before_header_hero_banner_scripts()
{
	wp_enqueue_script( 'bh-hero-banner', get_stylesheet_directory_uri() . '/js/bh-hero-banner.js', array(), '1.0', true );
}

All done now. Browse your site and see the effect.

---

Method 2: Beaver Template & Beaver Theme Header

Minimum Requirement:

Make sure that you already installed the following tools on your site.

1. Beaver Theme
2. Beaver Builder Plugin

Creating hero banner using Beaver Template Post Type

1. Navigate to Builder ->Templates
2. Click on Add New button
3. Enter Title
4. Launch Page Builder
5. Create Hero Banner as per your mind
6. Add ID “bh-hero-banner” into parent row. Hover on the row, click on rench icon, go to Advanced tab and enter bh-hero-banner into ID input field.
   
7. Click on Done button and then publish the layout.

Creating fixed header

1. Click on Appearance -> Customize sub menu
2. Click on Header Panel
3. Click on Header Layout section
4. Select “Fixed” from Fixed Header drop down
5. Click on Save & Publish button

Displaying hero banner template before header on home page

Open the functions.php of your child theme and add the following snippet

Displaying hero banner before header

add_action( 'fl_page_open', 'frame_home_before_header_banner' );
function frame_home_before_header_banner() 
{
	if( ! is_front_page() )
		return;

	FLBuilder::render_query( array(
		'post_type' => 'fl-builder-template',
		'p'         => 859
	) );
}

Line no 1: fl_page_open hook is adding the hero banner before the site header.
Line no 4-5: Displaying the hero banner on home page only. I created static front page. So I used is_front_page() conditional tag. If you are using the default home page, then you will use is_home() conditional tag.
Line no 7-10: Rendering the BB template using FLBuilder::render_query() method.
Line no 9: 859 is my template ID. You will replace it with your template ID.

Creating new JS file

1. Create a folder “js” into your child theme folder if it is not there.
2. Create a new file “bh-hero-banner.js” and add the following code

bh-hero-banner.js file

(function($){
  
  if( $('.fl-builder-content #bh-hero-banner').hasClass('fl-row-full-height') )
  {
  	$('body').removeClass('fl-fixed-header');
  	var headerHeight = $('header.fl-page-header').height();
  	var height = $(window).height() - headerHeight;
  	$('.fl-builder-content #bh-hero-banner').css('height', height);

	$(window).scroll(function(){
		if( $(window).scrollTop() >= height ) {
			$('body').addClass('fl-fixed-header');
			$('.fl-page-content').css('padding-top', headerHeight);
		} else {
			$('body').removeClass('fl-fixed-header');
			$('.fl-page-content').removeAttr('style');
		}
	});
  }
})(jQuery);

Enqueue JS file

Loading the new JS file “bh-hero-banner.js” on home page only using wp_enqueue_scripts hook. Open the function.php file and add this snippet at end of the file

Enqueue the scripts

add_action( 'wp_enqueue_scripts', 'frame_before_header_hero_banner_scripts' );
function frame_before_header_hero_banner_scripts()
{
	if( ! is_front_page() )
		return;
		
	wp_enqueue_script( 'bh-hero-banner', get_stylesheet_directory_uri() . '/js/bh-hero-banner.js', array(), '1.0', true );
}

Live Preview: https://youtu.be/YCdcWI-4-js