This problem usually appears on websites which are using the Fixed position on the Header, with “Overlapping Content” turned off. This only happens for a fraction of second, until the page receives a user event (click, scroll, mousemove etc).
The solution: #
Please copy the CSS snippet below and paste it into Customizer > Additional CSS, and adjust px as needed (default is 130px, so usually less than this, depending on the gap height) .
:root {
--header-default--height: 70px;
}
The problem, and why it happens #
Technically speaking the natural state of a fixed positioned element in a page is to overlap everything. In the case where Overlapping is disabled, we need to calculate the height of the element so we can create a placeholder element behind the fixed one so that it pushes the content downwards.
The problem is that in Rey, due to performance optimisations to reduce page-load scripting, that height calculation is delayed until the visitor makes an event like mousemove, scroll, click etc.
The solution provided above hints a default height until the Javascript calculation runs.