Full Width Hero Image with transparent Header Bar

Adding the full width hero image after header and making the transparent site header for home page only. Minimum requirements are:

1. Beaver Builder Theme
2. Beaver Builder Child Theme
3. Beaver Builder Plugin

At first you will create a full width hero image template using Beaver Builder plugin. Login to Dashboard and navigate to Dashboard -> Templates pages. By default “Templates” menu is disabled. You will enable it from Dashboard -> Settings -> Page builder -> Templates Tab. Now click on “Add New” button and create a template as per your site design.

Adding PHP & CSS in child theme’s files

Now you will add some custom PHP scripts for displaying the Hero Image template after header. Beaver Builder Theme have fl_after_header hook which is adding the content below the closing HTML5 tag. Therefore I target this action and execute the using WordPress’s do_shortcode() function.

Open the classes/class-fl-child-theme.php file and add the following PHP snippets above the last closing bracket (})

class-fl-child-theme.php

    /**
     * Add custom class in body tag
     */         
    static public function wpdw_add_custom_class( $classes ) {
      if( is_home() ) {
        $classes[] = FLTheme::get_setting('fl-fixed-header') . '-header-transparent';
      }
      
      return $classes;
    }
    
    /**
     * Randers hero image after header
     */         
    static public function wpdw_after_header_hero_image() {
      if( ! is_home() )
        return;
        
      echo do_shortcode( '' );
    }

Now open the functions.php file and add this single line at end of the file.

functions.php

//* Add class in  markup
add_filter( 'body_class', 'FLChildTheme::wpdw_add_custom_class' );

//* Add hero image template after header
add_action( 'fl_after_header', 'FLChildTheme::wpdw_after_header_hero_image' );

Lastly you need some CSS for transparent header effect. Open the style.css file and add this code.

style.css

/*
  Fadein Header
---------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
  .fadein-header-transparent .fl-page-header:not(.fl-page-header-fixed) {
      background-color: transparent;
      position: absolute;
      width: 100%;
      z-index: 999;
  }
  
  .fadein-header-transparent .fl-page-header:not(.fl-page-header-fixed) .fl-page-header-wrap {
      border: none;
  }
  
  .fadein-header-transparent .fl-page-header:not(.fl-page-header-fixed) a .fl-logo-text,
  .fadein-header-transparent .fl-page-header:not(.fl-page-header-fixed) .navbar-nav > li > a {
      color: #fff;
  }
}

Create a new js file “fixed.header.scroll.js” and put it into js folder. Here is the code of this JS file:

fixed.header.scroll.js

(function($){

  $(window).scroll(function(){
    if( $(window).width() > 991 ) {
      if ($(document).scrollTop() > 1 ) {
  	    $('.fl-page-header').addClass('fl-scroll');
  	  } else {
  	    $('.fl-page-header').removeClass('fl-scroll');
  	  }
    }
  });
	
})(jQuery);

Open the classes/class-fl-child-theme.php file and add the following PHP snippets above the last closing bracket (})

class-fl-child-theme.php

    /**
     * Add custom class in body tag
     */         
    static public function wpdw_add_custom_class( $classes ) {
      if( is_home() ) {
        $classes[] = FLTheme::get_setting('fl-fixed-header') . '-header-transparent';
      }
      
      return $classes;
    }
    
    /**
     * Enqueue scroll js file
     */
    static public function wpbw_fixed_header_scrolling_script() {
      $fl_header = FLTheme::get_setting('fl-fixed-header');
      if( ( $fl_header !== "fixed" || $fl_header !== "shrink" ) && ! is_home() )
        return;
        
      wp_enqueue_script( 'fixed-header-scroll', FL_CHILD_THEME_URL . '/js/fixed.header.scroll.js', array(), FL_CHILD_THEME_VERSION, true );
    }
    
    /**
     * Randers hero image after header
     */         
    static public function wpdw_after_header_hero_image() {
      if( ! is_home() )
        return;
        
      echo do_shortcode( '' );
    }

Now open the functions.php file and add this snippets at end of the file.

functions.php

//* Enqueue script
add_action( 'wp_enqueue_scripts', 'FLChildTheme::wpbw_fixed_header_scrolling_script' );

//* Add class in  markup
add_filter( 'body_class', 'FLChildTheme::wpdw_add_custom_class' );

//* Add hero image template after header
add_action( 'fl_after_header', 'FLChildTheme::wpdw_after_header_hero_image' );

For transparent header effect add this code into style.css file.

style.css

/*
  Fixed/Shrink Header
---------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
  .shrink-header-transparent .fl-page,
  .fixed-header-transparent .fl-page {
      padding: 0!important;
  }
  
  .shrink-header-transparent .fl-page-header,
  .fixed-header-transparent .fl-page-header {
      background-color: transparent;
  }
  
  .shrink-header-transparent .fl-page-header.fl-scroll,
  .fixed-header-transparent .fl-page-header.fl-scroll {
      background-color: #fff;
  }
  
  .shrink-header-transparent .fl-page-header:not(.fl-scroll) .fl-page-header-wrap,
  .fixed-header-transparent .fl-page-header:not(.fl-scroll) .fl-page-header-wrap {
      border: none;
  }
  
  .shrink-header-transparent .fl-page-header:not(.fl-scroll) a .fl-logo-text,
  .shrink-header-transparent .fl-page-header:not(.fl-scroll) .navbar-nav > li > a,
  .fixed-header-transparent .fl-page-header:not(.fl-scroll) a .fl-logo-text,
  .fixed-header-transparent .fl-page-header:not(.fl-scroll) .navbar-nav > li > a {
      color: #fff;
  }
}

Open the classes/class-fl-child-theme.php file and add the following PHP snippets above the last closing bracket (})

class-fl-child-theme.php

    /**
     * Add custom class in body tag
     */         
    static public function wpdw_add_custom_class( $classes ) {
      if( is_home() ) {
        $classes[] = FLTheme::get_setting('fl-fixed-header') . '-header-transparent';
      }
      
      return $classes;
    }
    
    /**
     * Randers hero image after header
     */         
    static public function wpdw_after_header_hero_image() {
      if( ! is_home() )
        return;
        
      echo do_shortcode( '' );
    }

Now open the functions.php file and add this single line at end of the file.

functions.php

//* Add class in  markup
add_filter( 'body_class', 'FLChildTheme::wpdw_add_custom_class' );

//* Add hero image template after header
add_action( 'fl_after_header', 'FLChildTheme::wpdw_after_header_hero_image' );

Lastly you need some CSS for transparent header effect. Open the style.css file and add this code.

style.css

/*
  Disabled Fixed Header 
---------------------------------------------------------------------------- */

@media only screen and (min-width: 992px) {
  .hidden-header-transparent .fl-page-header {
      background-color: transparent;
      position: absolute;
      width: 100%;
      z-index: 999;
  }
  
  .hidden-header-transparent .fl-page-header .fl-page-header-wrap {
      border: none;
  }
  
  .hidden-header-transparent .fl-page-header a .fl-logo-text,
  .hidden-header-transparent .fl-page-header .navbar-nav > li > a {
      color: #fff;
  }
}