MCHamzor

Sorry for the necro-post, but it might help someone! With @Ziggy's inspiration, this proved to be easy. https://debeez.ca & https://shop.debeez.ca Anyone is most welcome to borrow design ideas if useful :). Thanks for your early help @Ziggy! As a short overview, the reason I went for this design/"architecture" for a small business is that Squarespace often has update-related outages and does not let us back up in full. Further, my client wants people to call her. By spreading the risk of outage over two hosts, while unifying visual presentation, she was satisfied. Now we have the flexibility of leveraging Squarespace's payment platform, while also ensuring the client can expand freely in the future if required. I needed to unify the presentation of websites as closely as possible, which presented a challenge. Luckily, all of the DNS configuration was easy. However, Squarespace does not offer any truly responsive design templates, and lacks basic features such as a sticky footer & "square screen" responsive design support, due to their reliance on ultra-modern web standards. However, using Squarespace's global Code Injection, I was able to approximate a match of my custom full-support design that roughly suits both websites. Please note: nothing is minified intentionally. I wish for the client to have full access to my solution, as well as any other developers who may seek to over-complicate design with browser-based HTML features. For most small business, the template |'ve created can be easily copied or translated into a more complex server-side framework if desired -- or, further developed with lazy-loading as a single-page site. Further, this design adapts correctly for both SHORT and SKINNY screens, with minimal code, and zero frameworks. The JS might seem ugly to hardcore OO developer types, but please keep in mind, it was left that way intentionally for readability + simplicity. I don't wish for maintainers of my simple code to have to work very hard. It's not a one-size-fits-all solution, but it works here, and I hope someone else gets use out of it 🙂. I will let this thread die off now, and appreciate @Ziggy's kick in the pants :).

I phrased the question in a generic way, but am here for a small business client :). If I can get her permission, I'll share with you. I've decided to separate her concerns to deliver a barebones, static, performant single-page experience that leverages Squarespace's store/payment features. The key right now is synchronizing layouts, and you've saved me (as well as others, I hope!) a lot of time. Thanks for your helpful reply ;). I'll PM if I get permission.

Thank-you good person :). I never would've guessed at the terminology "basic", and your CSS sets me on the right track. I didn't take z-index into account foolishly. This appears to be enough to get me going. Thanks!

What is the shortest path to reliably making BOTH the header and foot sticky (position: fixed)? I've built a barebones site that uses a sticky header + footer. On window.innerWidth / innerHeight changes, I adjust the position of the footer, and poof, done. However, Squarespace appears to make this basic layout task a serious chore. The header disappears while scrolling, and there is a mountain of CSS / JS getting in the way of me understanding how to make a fixed footer. Can someone tell me what the magic JS is to stop the header from disappearing while scrolling, as well as making both the footer + header sticky? Or maybe there's some option buried in a menu I can click for these options? I'm an oldschool C guy who built modern sites with C# / PHP / etc. Answer any way you like, I'll take suggestions. jQuery dependencies will only slow down UX, but I'm willing to use it if someone has a quality suggestion. Thanks!