Sticky element runs into footer
I am using a typical navigation bar at the top of a website that scrolls with the page. On the left of the page I have a list of 8 items that, when clicked, bring up a pop up layer. I have set those 8 items to Sticky so they stay in place. My footer is a full width picture with links and info on it ... not unusually tall. Problem is, when you scroll to the bottom of the page my footer runs under the sticky items and looks messy. My client is set on the footer so there's no chance I can decrease the size of it at all. Is there any way to solve this?
Re: Sticky element runs into footer
got a link to the url Allie?
Re: Sticky element runs into footer
I have a temporary folder that the site is loaded to while it's under construction. Here is a link to the projects page. It's the only page with sticky elements on the left so it's the only page that I'll have issues with.
http://www.casteendesign.com/kenexpert1/projects.htm
Thank you for your help!
Re: Sticky element runs into footer
Hi Allie, thanks for the link. I can only see this as a problem if the visitors browser is set at a smaller height. I think that obviously if you're going to make parts of the page sticky, then the browser height needs to be considered as if it's not high enough the window runs out of real estate (something you can't control), and the sticky objects will overlay the footer. I can't think of a way around this other than making the side menu horizontal rather than vertical (It would also help if the vertical line ended at the bottom of the menu rather than being longer)
1 Attachment(s)
Re: Sticky element runs into footer
Some further thought. See attached. It will work fine on browsers 700px high & above. It will obviously still cause overlaps on browser heights below this.
Re: Sticky element runs into footer
Ok I will try that. Thank you
Re: Sticky element runs into footer
Just trying to understand the problem.... Why is the sticky there (purpose)?
You can have a sticky to left side of window without it overlapping the footer, so if it's only purpose is to be under menu/log then size the sticker from top down to base of menu / top of footer whichever is the shorter.
Personally I'd make the logo & menu 'stick' to left side & top of window (never scroll out of view and as suggested above just shift the menu up as much as possible so it's bas only just meets the footer when page is fully scrolled up) also I'd allow the sub text of logo slip under the main Logo element if someone is narrowing the window, it give a 'responsive' effect.
If I'm off base, on wrong track pls let me know,
Cheers, Ron
Re: Sticky element runs into footer
Just as a clarification of what I meant earlier, here is an example based on your earlier link: https://www.project-edge.com/EConstruct/
Cheers, Ron