<script>
document.addEventListener(‘DOMContentLoaded’, function () {
let scrollableNavigations = document.querySelectorAll(‘.horizontalNav .elementor-nav-menu’), svgIcon;
scrollableNavigations.forEach((scrollableNavigation) => {
let navigationItems = Array.from(scrollableNavigation.querySelectorAll(‘.menu-item’)).filter(e => e.parentElement.closest(‘.menu-item’) == null);
let activeNavigationItemIndex = navigationItems.findIndex((navigationItem) => navigationItem.classList.contains(‘current-menu-item’));
scrollableNavigation.style.scrollBehavior = “smooth”;
navigationItems.forEach((navigationItem, i) => {
let scrollToPosition = (navigationItem.getBoundingClientRect().left + navigationItem.offsetWidth / 2) – (window.innerWidth / 2);
navigationItem.addEventListener(‘click’, function () {
scrollableNavigation.scrollTo(scrollToPosition, 0);
});
if (i === activeNavigationItemIndex) scrollableNavigation.scrollTo(scrollToPosition, 0);
updateMask(scrollableNavigation);
});
scrollableNavigation.addEventListener(‘scroll’, function () {
updateMask(scrollableNavigation);
});
let navContainer = scrollableNavigation.parentElement;
let navWidth = navContainer.offsetWidth;
/* add class if can’t scroll */
if (scrollableNavigation.scrollWidth <= scrollableNavigation.offsetWidth) {
navContainer.classList.add(‘no-scroll’);
}
/* on resize */
let windowWidth = window.innerWidth;
window.addEventListener(‘resize’, function () {
if (windowWidth === window.innerWidth) return;
navWidth = navContainer.offsetWidth;
if (scrollableNavigation.scrollWidth <= scrollableNavigation.offsetWidth) {
navContainer.classList.add(‘no-scroll’);
} else {
navContainer.classList.remove(‘no-scroll’);
}
});
if (svgIcon) {
navContainer.insertAdjacentHTML(‘afterBegin’, `<button class=”scrl-button scrollable-navigation scrollable-navigation-left”>${svgIcon}<span class=”sr-only”>Scroll left</span></button>`);
navContainer.insertAdjacentHTML(‘afterBegin’, `<button class=”scrl-button scrollable-navigation scrollable-navigation-right”>${svgIcon}<span class=”sr-only”>Scroll right</span></button>`);
navContainer.querySelector(‘.scrollable-navigation-left’).addEventListener(‘click’, function () {
scrollableNavigation.scrollBy(navWidth * -0.78, 0);
});
navContainer.querySelector(‘.scrollable-navigation-right’).addEventListener(‘click’, function () {
scrollableNavigation.scrollBy(navWidth * 0.78, 0);
});
}
});
function updateMask(scrollableNavigation) {
const maxScroll = scrollableNavigation.scrollWidth – scrollableNavigation.clientWidth;
const currentScroll = scrollableNavigation.scrollLeft;
if (currentScroll > 8) {
scrollableNavigation.parentElement.classList.add(‘show-left-mask’);
} else {
scrollableNavigation.parentElement.classList.remove(‘show-left-mask’);
}
if (currentScroll < maxScroll – 8) {
scrollableNavigation.parentElement.classList.add(‘show-right-mask’);
} else {
scrollableNavigation.parentElement.classList.remove(‘show-right-mask’);
}
}
});
</script>
<style>
.horizontalNav {
–nav-gradient-width: 60px; /* width of gradients */
–nav-gradient-color: #ffffff; /* color of gradients */
–scrollable-navigation-width: 30px;
}
.horizontalNav {
border-bottom: var(–tab-style-border);
}
.horizontalNav .elementor-nav-menu.elementor-nav-menu.elementor-nav-menu {
overflow-x: auto;
display: flex;
flex-wrap: nowrap;
justify-content: start;
position: relative;
padding: var(–nav-padding);
}
.horizontalNav .elementor-nav-menu>.menu-item {
white-space: nowrap;
margin: var(–nav-item-margin);
}
.horizontalNav .elementor-nav-menu>.menu-item>.elementor-item {
padding: var(–nav-item-padding);
background-color: var(–nav-item-bg-color);
border-radius: var(–nav-item-border-radius);
color: var(–nav-item-color);
font-weight: var(–nav-item-font-weight);
font-size: var(–nav-item-font-size);
}
/* styles of nav items on hover */
.horizontalNav .elementor-nav-menu>.menu-item>.elementor-item:hover {
background-color: var(–nav-item-hover-bg-color);
color: var(–nav-item-hover-color);
}
/* styles of active nav item */
.horizontalNav .elementor-nav-menu>.menu-item>.elementor-item.elementor-item-active {
background-color: var(–nav-item-active-bg-color);
color: var(–nav-item-active-color);
border-top: var(–tab-style-border);
border-left: var(–tab-style-border);
border-right: var(–tab-style-border);
}
/* SVG arrows */
.horizontalNav .scrl-button.scrl-button.scrl-button.scrl-button.scrl-button {
background: none;
outline: none;
border: none;
padding: 0;
margin: 0;
}
.horizontalNav .scrl-button.scrl-button.scrl-button.scrl-button.scrl-button:focus-visible {
outline: auto;
}
.horizontalNav .scrollable-navigation {
position: absolute;
height: 100%;
left: 0;
width: var(–scrollable-navigation-width);
display: grid;
place-content: center;
z-index: 7;
}
.horizontalNav .scrollable-navigation-right {
left: initial;
right: 0;
}
.horizontalNav .scrollable-navigation svg {
width: var(–scrollable-navigation-width);
height: var(–scrollable-navigation-width);
}
.horizontalNav .scrollable-navigation-right svg {
transform: rotate(180deg);
}
.horizontalNav .elementor-nav-menu__container:not(.show-right-mask) .scrollable-navigation-right,
.horizontalNav .elementor-nav-menu__container:not(.show-left-mask) .scrollable-navigation-left {
opacity: 0.4;
pointer-events: none;
}
/* gradients on each side when it is possible to scroll more */
.horizontalNav .elementor-nav-menu__container {
position: relative;
}
.horizontalNav .elementor-nav-menu__container::before,
.horizontalNav .elementor-nav-menu__container::after {
content: “”;
position: absolute;
width: var(–nav-gradient-width);
top: 0;
bottom: 0;
transform: scaleX(0);
background: linear-gradient(to right, var(–nav-gradient-color), transparent);
transition: transform 0.4s ease-in-out;
z-index: 4;
pointer-events: none;
}
.horizontalNav .elementor-nav-menu__container::before {
left: -2px;
transform-origin: 0 50%;
}
.horizontalNav .elementor-nav-menu__container::after {
right: -2px;
transform-origin: 100% 50%;
background: linear-gradient(to left, var(–nav-gradient-color), transparent);
}
.horizontalNav .elementor-nav-menu__container.show-left-mask::before,
.horizontalNav .elementor-nav-menu__container.show-right-mask::after {
transform: scaleX(1);
}
/* END OF gradients on each side when it is possible to scroll more */
/* remove the scroll bar */
.horizontalNav .elementor-nav-menu::-webkit-scrollbar {
display: none;
}
/* screen reader only styles */
.sr-only {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>