Fixed Footer with scrolling content

Try change this:

#bottom-of-page {
width: 100%;
height: 100px;
position:absolute;
margin-left:-400px;
margin-bottom:px;
}

to:

#bottom-of-page {
width: 100%;
height: 100px;
position:absolute;
}

Then add this:

#bottom-of-page img {
    margin-left: -70%;
}

The grey gap comes from this CSS:

body {
margin-bottom: 100px;
}

If you remove it, the grey gap should be gone.

Hi Ying, almost there.. All the rest is working fine as it should be, just that the Nav-Links (pagination) is not visible anymore.. This code is visible in Page Source, but on the front end, I can't see it..

Do you mean this? I can still see them.

https://www.screencast.com/t/WYBIilUiV4

Can you clear cache so I can see your issue?

Hi Ying, all is cleared now and this issue is resolved.. Thanks for your support..

Hi Ying, sorry one problem seems to exist.. If you look at below screenshot, the Select Category drop down or link on the right is not clickable because maybe it is in line with the bottom image.. If the link is above the image line, then it becomes clickable.. How do i sort that pls.. Thanks..

Link not clickable

Change this CSS:

#bottom-of-page {
    width: 100%;
    height: 100px;
    position: absolute;
}

to:

#bottom-of-page {
    width: 100%;
    height: 100px;
    position: absolute;
    pointer-events: none;
}

Magic, David.. Now we can close this call.. Thanks.. I have marked it as resolved..