The Design:
So I have a page with a somewhat short Footer Section…
It has a Div at the bottom (inside the section) for Copyright, so the Section has NO bottom padding below that.
The Issue:
I have a “Resources” link in my top nav menu, which then scrolls down to the “Footer Section”.
In Live view, if I scroll down to the Bottom of the page manually, it looks fine.
However, if I click the link to it, when it scrolls down to the bottom, it leaves extra space below.
Once I scroll back up and down maunally, it goes back to normal again, removing the extra.
Notes:
The extra space shown when clicking the link has the same BG color/image as my Footer BG.
Again, the Footer Section has no Padding whatsoever, due to a Copyright Div at bottom.
So I’m unsure as to why this would be happening.
My guess:
Since my Footer is so short, when the in-page link is clicked, it tries to scroll down to the “top” of the section, which isn’t tall enough to cover the entire height of the page, so for some reason it adds the extra padding at the bottom for the purpose of making it fill up the entire viewport (or rather, so that the top of the Footer Section is at the Top of the Viewport). I can’t think of any other explanation.
Another Note:
I’m unable to share a read-only, as it is for a client, but I’ve provided all the information needed, as it’s pretty straight-forward.
PS:
I have attached images from inside the Designer (how it should look).
and Live View, after clicking the Link in the Nav Menu that drags page to the Footer.
Any ideas or thoughts would be greatly appreciated!
Thanks in advance!
I don’t want to make it a Fixed Position Footer, because I don’t want it to be on screen at all times (like my top Navbar is) - I just want it to be a normal Footer at the bottom of the page. So Fixed Position is out.
I can try setting the Section to Flex, if you think that would help.
What settings, specifically, do you think I should set for the Footer Section, once I set it to Flex, in order to fix the issue I’m having?
Again, I think my hypothesis is correct from my initial post - because it looks fine when I simply scroll down to it… It only has this issue when I click the link in my NavBar which scrolls down to the Footer - and since the Footer Section Height isn’t tall enough for it to scroll until the top of the Footer Section is at the top of the Viewport (as it normally would with any other Section/On-Page-Link), it compensates by showing that extra padding below it for some reason… Because the ‘extra space’ it shows, happens to be the exact amount of space that is needed for the top of the Footer Section to reach the top of the Viewport, as an in-page link would typically do. But again, it fixes itself once I scroll up and back down… Only happens when I click that Navbar link that scrolls down to the Footer Section.
What do you think of my hypothesis?
And if you think setting the Section to Flex will help, any specific settings I should use?
I only debug in a browser’s developer tools since I can see calculated styles and the impact of scripts. Would be happy to look if you PM’d the URL of the staged site.
