Reveal Header on Scroll over First Section

Description

• reveal header on scroll over first section
• do this on one page only
• view demo – password: abc
• Buy me a coffee

#1. Install code

#1.1. First you need to Edit Header

Edit Design

Enable Fixed Position – Style: Basic

#1.2. Hover on top right of SECOND SECTION > Click Edit Section

Enter word: second

second

#1.3. Hover on Page where you want to apply effect > Click Gear icon

Click Advanced > Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.beaverhero.com/header/revealheader.js"></script>
<style>article>section:first-child{padding-top:0px!important}body:not(.sqs-edit-mode-active) header#header{transform:translateY(-100vw);transition:all 0.9s ease}body.reveal-header header#header{transform:translateY(0);transition:all 0.9s ease}</style>

#2. Customize

#2.1. Can’t open Burger Menu

Use this code under main code to fix it

<style>
body.header--menu-open header#header {
    transform: unset !important;
    transition: unset !important;
}
</style>