Header overlays site content


On my website http://frederic-jerez.fr the header overlays the site content. I tried adding the following to the css :

“.single .page-wrap{
padding-top: 40px !important;

However, this only seems to work (half of the time) on Chrome and IE.
On Safari, the problem persists 70-80% of the time.

What can I do?

Thank you in advance.


Did you mean when the page scrolled? if yes, then you need to decrease the size of your logo image. Please add this into: Customize > additional CSS.

.site-header.float-header img.site-logo {
    height: 80px;



I applied your CSS and the bug is still present half of the time, mostly in Safari.
Here is a screenshot of the bug : https://www.dropbox.com/s/a8wtkx0nka8yxcb/Capture%20d%E2%80%99%C3%A9cran%202017-06-12%20%C3%A0%2019.44.24.png?dl=0

As you can see, the header overlays the site content. To answer your question, it is not while scrolling, it is at the top of the website, before scrolling.

Thank you in advance,


I am sorry, but I cant see the issue like in your image. Here is my screenshot http://prntscr.com/fixyss
But maybe you can resolve it by decreasing the size logo, try this also please:

.site-header img.site-logo {
    max-height: 100px !important;

I reduced the size of my logo and I don’t have any more overlap, thanks!

I have another issue now, in Safari and Chrome the space between the header and the site content varies between short and long :

> https://www.dropbox.com/s/96gkp3pvwe3yces/Capture%20d%E2%80%99%C3%A9cran%202017-06-12%20%C3%A0%2020.25.45.png?dl=0

> https://www.dropbox.com/s/okggfogsgg52rkk/Capture%20d%E2%80%99%C3%A9cran%202017-06-12%20%C3%A0%2020.25.59.png?dl=0

I think this is related to the first problem.

What can I do?

Thank you in advance.