On the contact page I can’t figure out how to make the footer stick to the bottom without messing up nav bar, on homepage footer is not even sticking. Can anyone please find a solution for me which will work on all pages I currently have? One more issue, on contact page the background of the footer (which is black) only take the certain area of the screen but I want it to expand it to the edges of the screen. Thanks for reading
Hi @abirdesign, the footer symbol in the home page is not placed directly under the body as in the case of the contact page. I would move the footer on the home page directly under the body like so:
On the background color, the Home page has a Body class applied, but on the contact page there is no Body class applied to the Body, I might first set the Body class on the contact page, then see how things look.
Still not working, I guess it was mistakenly put outside otherwise it was inside (great eye you have). I now followed your all advice yet no change there is
One good thing happened just now, I made another div block and gave it a ‘Glossy effect’ class, now the nav bar looks fine and the footer’s background is expanding. But the footer is yet not sticking to the bottom.
I took a look and the footer was still within your wrapper, For the footer to be anchored to the bottom of the viewport, I would put the footer directly under the body, see here how it should look like on the Contact page:
I would also do this on the home page:
On the Footer, you can give that a Width of 100% to be the width of the viewport:
Alternatively you can leave the Footer nested in the div with the Gallery Effect bg class and give the Body and the Gallery Effect bg class a height of 100%, then use display flex on the Gallery Effect bg class with a vertical direction and set flex child sizing to grow if possible:
Thank you very much, I am so grateful to you for so fast response and for making this community so lively. The former method solved the issue, with the latter one I tried to follow but then it’s not working exactly. I will go with the former one which is much simpler. Thanks again for all the help
I am sorry but I have to thank you again, the latter method also worked! How it didn’t worked earlier because I am stupid lol. I thought I was using the flexbox on Glossy Bg class but I wasn’t. Thanks, you are awesome!
