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
Make sure that you already installed the following tools on your site.
Creating full height hero banner part using Beaver Themer
- Navigate to Builder -> Theme Layouts
- Click on Add New button
- Enter title
- Type is “Theme Layout”
- Select “Part” from layout drop down
- Click on “Add Theme Layout” button
- You will redirect to next page
- Find Themer Layout Settings section
- Select “Page Open” position
- Set the location as per your requirement
- Click on Launch Page Builder button
- Create a full height hero banner
- 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.
- Click on Done button and then publish the layout.
Creating fixed header
- Click on Appearance -> Customize sub menu
- Click on Header Panel
- Click on Header Layout section
- Select “Fixed” from Fixed Header drop down
- Click on Save & Publish button
Live Preview: https://youtu.be/YCdcWI-4-js