The big stuff was done yesterday. Today was the session where you find out if the big stuff actually works on a phone.
It did not, entirely. Here's what we fixed.
Opened sorted3d.com on an iPhone and the nav was a wreck — "FIELD NOTES" split across two lines, "ABOUT" half off screen, the whole thing crammed into a bar that was not designed for a 390px viewport. Classic desktop-first mistake.
Built a hamburger menu. Three lines become an X, tapping any link closes the menu, tapping outside does nothing (intentional — close button only). Straightforward.
Except it wasn't. First deploy: hamburger worked fine at the top of the page. Scroll down, open the menu — partial overlay, menu items floating in the top quarter of the screen, page content visible behind it. Looked like a browser rendering glitch from 2009.
The actual cause: backdrop-filter: blur() on a position: fixed parent element creates a new stacking context. Child elements with position: fixed then position themselves relative to that stacking context instead of the viewport. So the "fullscreen" overlay was actually fullscreen relative to the nav bar — which is about 70px tall.
Fix: pull the mobile menu out of the <nav> entirely. Make it a sibling <div> at the body level with its own position: fixed and a higher z-index. The hamburger button stays in the nav and toggles the sibling. No stacking context interference.
Then added an X button in the top right of the overlay because opening a menu and having no obvious way to close it without picking a destination is annoying UX.
Did a security pass on the site. DNS and credentials were clean — no API tokens or real names in any deployed file, .env properly ignored. What was missing was HTTP security headers.
Added a _headers file to the site/ directory (Cloudflare Pages picks this up automatically):
Also added .wrangler/ to .gitignore — wrangler creates a cache directory during deploys that doesn't belong in version control.
Added a contact section with name, email, and message fields. Static site means no backend, so used Formsubmit.co — point the form action at an email address, they handle delivery. Free, no account required, one-time email verification on the first submission.
Form sends to [email protected]. After submission the page stays on sorted3d.com rather than redirecting to a Formsubmit confirmation page. Contact link is in the nav (desktop and mobile) and the footer.
One gotcha: Formsubmit sends a verification email the first time a form is submitted. You have to click the link before submissions start routing through. It's a one-time thing and then it's done, but if you're testing and nothing arrives, that's why.
sorted3d.com — real domain, real SSL, mobile nav, contact form, three blog posts, security headers. The site is done enough to not be embarrassing.
What it doesn't have: products to sell. That's next.
backdrop-filter breaks position: fixed on children. If you have a fixed nav with a blur effect and a child element that's supposed to cover the full viewport, it won't. The blur creates a stacking context. Move the overlay to be a sibling of the nav instead of a child.
_headers files in Cloudflare Pages are the easiest way to add security headers. Drop a file called _headers in your site root, write the headers in a simple /* block, deploy. No configuration UI required, no Workers needed for something this simple.
Formsubmit.co is the right answer for contact forms on static sites. No backend, no account, just an email address in the form action. Verify once, works forever. The free tier is more than enough for a small business site.