Nobody talks about how hard mobile navigation is to get right in Framer.
The sticky navbar works fine for most sites. But when you're building something brand-heavy, it competes with the content and kills the feel. You need it to get out of the way.
For Lineage — my supplement brand template — I built a three-state floating menu system in a single code component.
How it works:
↑ Scrolled away — the top bar disappears past 80px. A floating MENU pill appears from the bottom. Content breathes.
☰ Menu open — tapping the pill opens a white card floating over the page with 12px margins and 32px border radius on every corner. Not edge-to-edge. That gap is everything — it makes the menu feel like it's over the page, not replacing it.
⊞ Products — tapping Products slides up a full-screen overlay via AnimatePresence. Not inline expand. Closing it drops back to the floating card. The layering feels intentional.
Things that tripped me up:
— left: 50%; transform: translateX(-50%) breaks inside Framer's iframe. Use a full-width fixed container with justify-content: center instead.
— The dot-grid icon needs two real SVG states. Toggling opacity on one icon doesn't read the same way.
— createPortal is necessary for the overlay to escape parent overflow clipping.
Everything is in one Navbar.tsx with addPropertyControls so buyers configure it without touching code.
Drop a question below if you're building something similar 👇
Nobody talks about how hard mobile navigation is to get right in Framer.
The sticky navbar works fine for most sites. But when you're building something brand-heavy, it competes with the content and kills the feel. You need it to get out of the way.
For Lineage — my supplement brand template — I built a three-state floating menu system in a single code component.
How it works:
↑ Scrolled away — the top bar disappears past 80px. A floating MENU pill appears from the bottom. Content breathes.
☰ Menu open — tapping the pill opens a white card floating over the page with 12px margins and 32px border radius on every corner. Not edge-to-edge. That gap is everything — it makes the menu feel like it's over the page, not replacing it.
⊞ Products — tapping Products slides up a full-screen overlay via AnimatePresence. Not inline expand. Closing it drops back to the floating card. The layering feels intentional.
Things that tripped me up:
— left: 50%; transform: translateX(-50%) breaks inside Framer's iframe. Use a full-width fixed container with justify-content: center instead.
— The dot-grid icon needs two real SVG states. Toggling opacity on one icon doesn't read the same way.
— createPortal is necessary for the overlay to escape parent overflow clipping.
Everything is in one Navbar.tsx with addPropertyControls so buyers configure it without touching code.
Drop a question below if you're building something similar 👇
