/* ======================================== WIX MOBILE BOTTOM TABS - COMPLETE SOLUTION ======================================== */ /* STEP 1: ADD THIS CSS TO WIX CUSTOM CODE (HEAD) */ /* Mobile Bottom Tabs - ONLY visible on mobile devices */ @media screen and (max-width: 768px) { .wix-mobile-tabs { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: #ffffff !important; display: flex !important; justify-content: space-around !important; align-items: center !important; padding: 8px 0 12px 0 !important; border-top: 1px solid #e0e0e0 !important; box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1) !important; z-index: 9999 !important; height: 65px !important; width: 100% !important; } .wix-tab-item { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: #757575 !important; transition: all 0.3s ease !important; padding: 4px !important; min-height: 50px !important; cursor: pointer !important; position: relative !important; } .wix-tab-item:hover, .wix-tab-item.active { color: #007AFF !important; transform: translateY(-1px) !important; } .wix-tab-icon { font-size: 22px !important; margin-bottom: 2px !important; transition: all 0.3s ease !important; line-height: 1 !important; } .wix-tab-item.active .wix-tab-icon { transform: scale(1.1) !important; } .wix-tab-label { font-size: 10px !important; font-weight: 500 !important; text-align: center !important; line-height: 1.1 !important; margin-top: 1px !important; } /* Notification badge */ .wix-tab-badge { position: absolute !important; top: 2px !important; right: 20% !important; background: #ff3b30 !important; color: white !important; border-radius: 10px !important; padding: 2px 5px !important; font-size: 9px !important; min-width: 14px !important; text-align: center !important; font-weight: bold !important; } /* Add bottom padding to body to prevent content hiding behind tabs */ body { padding-bottom: 75px !important; } /* Ensure tabs stay above all Wix elements */ .wix-mobile-tabs * { box-sizing: border-box !important; } } /* HIDE on desktop and tablet - VERY IMPORTANT */ @media screen and (min-width: 769px) { .wix-mobile-tabs { display: none !important; visibility: hidden !important; } body { padding-bottom: 0 !important; } } /* Loading animation */ .wix-tab-loading { opacity: 0.5 !important; pointer-events: none !important; } /* Demo content styles for preview */ .demo-content { padding: 20px; text-align: center; font-family: Arial, sans-serif; } .demo-section { background: #f8f9fa; margin: 20px 0; padding: 30px; border-radius: 8px; } .instructions { background: #e3f2fd; padding: 20px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #2196F3; } .code-block { background: #263238; color: #ffffff; padding: 15px; border-radius: 5px; font-family: 'Courier New', monospace; font-size: 14px; overflow-x: auto; margin: 10px 0; }
top of page

Book Online

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.

Book a Service
bottom of page
document.addEventListener('DOMContentLoaded', function() { console.log('🚀 Wix Mobile Tabs Loaded'); const tabItems = document.querySelectorAll('.wix-tab-item'); // Navigate to your Wix pages function navigateToWixPage(pageSlug) { // Add loading state const clickedTab = document.querySelector(`.wix-tab-item[data-page="${pageSlug}"]`); if (clickedTab) { clickedTab.classList.add('wix-tab-loading'); } // YOUR WIX PAGE URLS - UPDATE THESE! const pageUrls = { 'home': '/', // Home page 'about': '/account/calorie-tracker', // About page 'services': '/services', // Services page 'contact': '/contact', // Contact page 'shop': '/shop', // Shop page 'portfolio': '/portfolio', // Portfolio page 'blog': '/blog', // Blog page 'booking': '/booking', // Booking page // ADD YOUR PAGES HERE: // 'yourpage': '/your-page-url', }; // Navigate to the page if (pageUrls[pageSlug]) { window.location.href = pageUrls[pageSlug]; } else { console.error('Page not found:', pageSlug); // Remove loading state if page not found if (clickedTab) { clickedTab.classList.remove('wix-tab-loading'); } } } // Add click handlers to all tabs tabItems.forEach(function(tab) { tab.addEventListener('click', function(e) { e.preventDefault(); const pageSlug = this.getAttribute('data-page'); console.log('Navigating to:', pageSlug); navigateToWixPage(pageSlug); }); }); // Highlight current page tab function setActiveTab() { const currentPath = window.location.pathname.toLowerCase(); // Remove active class from all tabs tabItems.forEach(function(tab) { tab.classList.remove('active'); }); // Determine active tab based on current URL let activePageSlug = 'home'; // default if (currentPath.includes('/about')) { activePageSlug = 'about'; } else if (currentPath.includes('/services')) { activePageSlug = 'services'; } else if (currentPath.includes('/contact')) { activePageSlug = 'contact'; } else if (currentPath.includes('/shop')) { activePageSlug = 'shop'; } else if (currentPath.includes('/portfolio')) { activePageSlug = 'portfolio'; } else if (currentPath.includes('/blog')) { activePageSlug = 'blog'; } else if (currentPath.includes('/booking')) { activePageSlug = 'booking'; } // ADD MORE PAGE CHECKS HERE IF NEEDED // Add active class to matching tab const activeTab = document.querySelector(`.wix-tab-item[data-page="${activePageSlug}"]`); if (activeTab) { activeTab.classList.add('active'); console.log('Active tab set:', activePageSlug); } } // Set active tab on page load setActiveTab(); // Optional: Update badge counts dynamically function updateBadgeCount(tabName, count) { const tab = document.querySelector(`.wix-tab-item[data-page="${tabName}"] .wix-tab-badge`); if (tab) { if (count > 0) { tab.textContent = count; tab.style.display = 'block'; } else { tab.style.display = 'none'; } } } // Example: Update contact badge (you can call this from your Wix code) // updateBadgeCount('contact', 3); console.log('✅ Wix Mobile Tabs Ready'); }); // Optional: Expose function globally for Wix Corvid/Velo window.updateTabBadge = function(tabName, count) { const badge = document.querySelector(`.wix-tab-item[data-page="${tabName}"] .wix-tab-badge`); if (badge) { if (count > 0) { badge.textContent = count; badge.style.display = 'block'; } else { badge.style.display = 'none'; } } };