Full Height Hero Banner Before Header with Sticky Header

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

Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.


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

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials