cw-nav-names.html

<!-- 
THEATER MENU CUSTOMIZER - COMPLETE SOLUTION
Instructions for partner theaters:
1. Copy this entire code block below 
2. Paste it into your website before the closing </body> tag or directly in the custom code section of you Theatre Details 
 Page 
3. Change ONLY these two lines below:
   - Line 15: Change 'Performances' to your desired text for Shows
   - Line 16: Change 'Workshops' to your desired text for Classes
-->

<script>
// ============= CHANGE THESE TWO LINES ONLY =============
var showsNewText = 'Performances';   // What to replace "Shows" with
var classesNewText = 'Workshops';    // What to replace "Classes" with
// ========================================================

// Add CSS to hide menu initially
var style = document.createElement('style');
style.innerHTML = `
    .theater-menu-hidden { 
        opacity: 0 !important; 
        transition: opacity 0.3s ease; 
    }
    .theater-menu-visible { 
        opacity: 1 !important; 
    }
`;
document.head.appendChild(style);

// Run when page loads
function initTheaterMenu() {
    // Hide navigation immediately
    var navs = document.querySelectorAll('.navbar-collapse, .navbar-nav, nav, .menu, .navigation');
    for (var i = 0; i < navs.length; i++) {
        navs[i].classList.add('theater-menu-hidden');
    }
    
    // Find and update the specific menu links
    var allLinks = document.querySelectorAll('a[href]');
    var updatedCount = 0;
    
    for (var i = 0; i < allLinks.length; i++) {
        var link = allLinks[i];
        var href = link.getAttribute('href');
        var text = link.textContent.trim();
        
        // Update Shows → Custom Text
        if (href === '/shows' && text === 'Shows') {
            link.textContent = showsNewText;
            updatedCount++;
        }
        
        // Update Classes → Custom Text
        if (href === '/classes' && text === 'Classes') {
            link.textContent = classesNewText;
            updatedCount++;
        }
    }
    
    // Show navigation after updates
    setTimeout(function() {
        for (var i = 0; i < navs.length; i++) {
            navs[i].classList.remove('theater-menu-hidden');
            navs[i].classList.add('theater-menu-visible');
        }
    }, 100);
}

// Start when page is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initTheaterMenu);
} else {
    initTheaterMenu();
}
</script>