I recently created a webpage for a company at http://www.parkprivatewealth.com/park and everything looked fine on Chrome. However, when using Safari to view the page, the homepage heading gets cut off when using fixed position. The text is there when I try to scroll up more and seems like something is blocking the text.
When I take off the "position: fixed" tag in the CSS the words appear again, would anyone possibly know how to solve the problem?
The problem: When the header changes to a fixed
position, it gets pulled out of the document flow and the .container element pushes upward. Since you didn't use top
, left
, etc., the h1
element moves upward with .container
The solution: Add padding-top
to the .container element. It should be the same as the header height.