Footer Content overlapping with main content

Support
#1

On my “Presse” page, when I scroll down, the Content is in the footer - so the content and the footer are overlapping in some weird way…

How can I solve that?

Regards,

Andre

#2

Hello Andre,

I have checked your page and I found out that you have aded a custom css that make your footer fixed to the bottom of the page. You have this:

footer.x-colophon {
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
}

It is overlapping to your content because of its position. The only way to give them some space between the content and the footer is to remove that custom css and then add a bottom padding in the last section element. Right now, the bottom padding is 0 which is why it is close or overlapping to the footer.

We would love to know if this has worked for you. Thank you.

#3

Hi,

this would work but the footer wouldn’t be on the bottom of the page all the time…
Is there a way to make everything be on one page (without needing to scroll) and the footer being on the bottom?

Thanks,
Andre

#4

Hi Andre,

If you want the footer area to be always in the bottom, you can still use the CSS code but you will have to add an additional CSS code to the main content area where an additional space will be added to the bottom to make up for the space that the fixed footer is supposed to take.

It should be something like:

.x-main {
    margin-bottom: 50px;
}

Hope this helps you get started.

#5

Hi, this didn’t work… Is there another solution?

#6

Also, suddenly my Header logo doesn’t show anymore, the footer looks all messed up on mobile and the navigation hamburger is gone on mobile too, are you guys working on something or is my website destroying itself here? :thinking:

#7

Hello Andre,

To make sure that the footer will always be at the bottom of the page, you use this code instead:

.x-main{
    min-height: calc(100vh - 95px);
}

This will set a minimum height for the content area. It is as almost accurate because the computation is this:
100% browser screen height deducted by the total height of both the header and footer.

And by the way, I have seen that you added this custom css to make the footer fixed to the bottom.

footer.x-colophon {
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
}

You should have added the z-index z-index: 9999; as well so that the footer will also stay on top of any other elements on the page:

footer.x-colophon {
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 9999;
}

To learn more about the minim height and z-index property, please check this out:

Hope this helps.

#8

Hi, this works now, but as I wrote earlier on my home page, the header logo disappeared completely, on mobile the footer is dislocated and the header completely blank with no navigation or logo whatsoever…
Do you know what caused that issue?
Thanks,
Andre

#9

Hi Andre,

Sorry but I cant replicate that issue, both the header and footer, mobile or desktop looks fine on my end (please see screenshot below). Please clarify how we can replicate the issue.

Thanks,

#10

Hi, it’s only on the “Home” page, sorry, I didn’t write it clearly :slight_smile:

#11

Hello Andre,

I can’t find the root cause but the image is weirdly loaded with 1x1 width and height and then there is a noSwipe class added to it. If in case you have customization added to it, please try to remove.

Footer seems normal for me, please clarify.

Please inspect the element. Go to Customize tab. Elements are hidden on mobile. Check HIDE DURING BREAKPOINTS settings of those header elements.

#12

Hi,
I don’t have any customization added to it, also, it happened suddenly without me changing something…
How can I fix that?


Here you can see that the footer menu isn’t centered, also the header doesn’t show logo or navigation burger.

Thanks,
Andre

#13

I just found out that it happens because of the slider revolution plugin. Any idea how to get rid of the issue?

#14

Hey Andre,

It’s because of the following CSS in your slider. Removing it fixed the issue.

div {
 overflow:hidden; 
  width:100%;
}

image
image1366×768 90.8 KB

image

We’d like to kindly ask that you remove custom codes in your site next time when troubleshooting. It is part of or mentioned in our Common Issues article and it’s to ensure that the issue is not coming from our theme.

Thanks.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.