/* ========================================
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;
}
BillionSmiles.fit
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';
}
}
};