Fixed the header and began to observe the following problem: when scrolling, some objects appear on a fixed object.

<div id="top_head" style="width: 100%; position: fixed; top: 0;"> <h4 class="c-white"> <span class="icon fa-heartbeat"></span> Site <span class="icon fa-heartbeat"> </h4> </div>

Start:

enter image description here

Further:

enter image description here

Still:

enter image description here

    1 answer 1

    Set the z-index property for the header - it should be larger than all the objects that are now above your header (for example, more than the Recaptcha block).

    Styles:

     .header { position: fixed; top: 0; width: 100%; z-index: 1000; }

    And, accordingly, layout:

     <div class="header" id="top_head"> <h4 class="c-white"> <span class="icon fa-heartbeat"></span> Site <span class="icon fa-heartbeat"></span> </h4> </div>