1 of 3,105
Hub Universal Nav + Footer โ Paste Into Every Page
Inbox
Jason Shields
Attachments
1:16โฏPM (0 minutes ago)
to me
Hey Jason,
Rebuilt as two separate, standalone files this time โ each one is fully self-contained and can be pasted independently:
myreio-hub-nav.html โ the top nav bar + slide-down menu
myreio-hub-footer.html โ the bottom footer block
Both are now enterprise-grade: frosted glass blur on the status bar and dropdown, buttery cubic-bezier easing (no linear transitions), layered depth shadows, an animated hamburger-to-X icon morph, elegant gradient-pill active states with a glowing gold indicator, hover/focus micro-interactions on every interactive element, 44px+ tap targets throughout, and fully responsive behavior. Same design tokens as before โ gold #ffcc33, dark #0a0a0b base, Lato wordmark, 5px radius, .hubnav-/.hubfoot- prefixed classes, zero external dependencies, no "AI" wording anywhere.
How to use them:
Open myreio-hub-nav.html. Copy everything between and . Paste it at the VERY TOP of each hub page's HTML, before any page content.
Open myreio-hub-footer.html. Copy everything between and . Paste it at the VERY BOTTOM of each hub page's HTML, after all page content.
Near the top of each page's script, set: window.HUB_CURRENT_PAGE = '/your-route'; (e.g. /my-leads, /settings, /billing). This highlights the matching nav item with the elegant gold gradient + glow treatment. Setting a nested Settings sub-route (/billing, /support, /setup-guide) also auto-expands the Settings section.
Menu items, order, and routes are unchanged: Dashboard, My Leads, Content, Studio, My System, Targeting, Campaigns (with "Ads & Postcards" subtitle), Dialer, Connect Channels, and expandable Settings (Billing, Support, Get Started). Tapping a row shows a polished gold toast ("Opening [label]...") and navigates; tapping outside the menu closes it. Footer keeps all 7 social links (Facebook, Instagram, LinkedIn, YouTube, TikTok, X, Email), the tagline, and the copyright line โ now with refined hover-lift icon buttons.
Pages that need this pasted in: /dashboard (swap in this version for consistency), /my-leads, /content-studio, /video-studio, /automations, /targeting, /campaigns, /dialer, /connect, /connect-your-systems, /settings, /billing, /support, /setup-guide, /performance, /templates, /mail, /lead-map-identifier
Let me know if you want any further refinement.
โ Twin
2 Attachments
โข Scanned by Gmail
my leads page
and .
2. Paste it at the VERY BOTTOM of the page's HTML, after all page content.
Self-contained: all CSS inline, zero external dependencies.
All classes are prefixed hubfoot- to avoid collisions with page-specific styles.
-->