.text-nav-link {
border-bottom: 3px solid #fff;
transition: border-bottom-color 0.3s ease;
}
/* Active styling */
.text-nav-link.active {
color: #DD3333 !important;
border-bottom-color: #DD3333;
}
/* Hover styling on the link */
.ux-menu-link__link:hover {
color: #DD3333 !important;
}
document.addEventListener('DOMContentLoaded', function() {
// Select all scroll-to markers (anchors inside .scroll-to with a name attribute)
const markers = document.querySelectorAll('.scroll-to a[name]');
// Cache all navigation links
const navLinks = document.querySelectorAll('.ux-menu-link__link');
// This variable will store the currently active marker name
let currentActive = null;
// Create an Intersection Observer that triggers when a marker is at least 50% visible.
const observerOptions = {
threshold: 0.5
};
const observer = new IntersectionObserver((entries) => {
// Filter for markers that are currently intersecting (in view)
const visibleMarkers = entries.filter(entry => entry.isIntersecting);
if (visibleMarkers.length > 0) {
// Sort the visible markers by their distance from the top of the viewport.
visibleMarkers.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
// Choose the marker closest to the top as the new active marker.
const activeMarker = visibleMarkers[0].target;
const newActive = activeMarker.getAttribute('name');
// Only update if the active marker has changed.
if (newActive !== currentActive) {
// Remove the active class from the nav container corresponding to the previous marker.
navLinks.forEach(link => {
const hash = new URL(link.href, document.baseURI).hash;
if (hash === `#${currentActive}`) {
link.closest('.text-nav-link').classList.remove('active');
}
});
// Add the active class to the nav container corresponding to the new marker.
navLinks.forEach(link => {
const hash = new URL(link.href, document.baseURI).hash;
if (hash === `#${newActive}`) {
link.closest('.text-nav-link').classList.add('active');
}
});
// Update the current active marker name.
currentActive = newActive;
}
}
// If no markers are visible, do nothing so the last active state remains.
}, observerOptions);
// Observe each scroll-to marker.
markers.forEach(marker => observer.observe(marker));
});
Packages
Packages
Discover our tailored travel packages, designed to deliver unforgettable and hassle-free Grand Prix experiences.
Package 1
What's Included:
150
.packages-section {
position: static !important;
z-index: auto !important;
}
.packages-section .section-bg {
display:none !important;
position: static !important;
}
.packages-section .section-content {
z-index: auto !important; /* Removes z-index */
}
.packages-section .section-content .col {
position: static !important;
}
.packages-section .section-content .col .col-inner {
position: static !important;
}on: static !important;
}
We Value Our Customers
CALL 020 3966 5680 OR COMPLETE THE ENQUIRY FORM BELOW

