Displaying the Beaver Themer Header on Scroll

I am completely hiding my Beaver Themer header, until the user scrolls and it would be appear in sticky mode. In this tutorial I’m sharing the complete procedure.

Creating The Site Header

At first I create the site header with Beaver Themer add-on. There have two restrictions in Themer header settings. You will not enable the sticky and overlay options.

Adding The CSS and JS Code in Themer Header Layout

1. Launch the Beaver Builder editor of your Themer Header layout.
2. Open the Row Settings form
3. Click on Advanced tab
4. Add the site-header class name into HTML Element -> Class input box
   
5. Click on Save button
6. Open the Tools panel
7. Click on Layout CSS & JavaScript button

   The rest of the content is available for Pro members. Click on the PAY NOW button to enable access to this content.

   $10.00Pay Now

   * Payment is non-refundable.

   Paid members will be able to login below to see the restricted content.

   Login

   Username or email address *

   Password *

   Remember me Log in

   Lost your password?