#sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: transparent;
border-bottom: 1px solid transparent;
backdrop-filter: none;
transition:
background-color 0.3s ease,
backdrop-filter 0.3s ease,
border-color 0.3s ease;
}
#sticky-header.is-scrolled {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(40px);
border-bottom-color: #EBF2F6;
}
/* Default menu color (before scroll) */
#sticky-header .e-n-menu-title-text {
color: #FFFFFF;
transition: color 0.3s ease;
}
/* After scroll: menu text color changes */
#sticky-header.is-scrolled .e-n-menu-title-text {
color: #5B6576;
}
/* 1) Caret icon color same as menu text (#5B6576) */
#sticky-header.is-scrolled .e-font-icon-svg.e-fas-caret-down {
color: #5B6576;
fill: currentColor;
}
/* 2) MY ITS button styles when scrolled */
#sticky-header.is-scrolled .sticky-header-myits .elementor-button {
background-color: #187DC2;
color: #FFFFFF;
border-color: #187DC2; /* optional but usually desired */
}
/* Button icon SVG inside MY ITS button */
#sticky-header.is-scrolled .sticky-header-myits .elementor-button .elementor-button-icon svg {
color: #FFFFFF;
fill: currentColor;
}
/* Button text inside MY ITS button */
#sticky-header.is-scrolled .sticky-header-myits .elementor-button .elementor-button-text {
color: #FFFFFF;
}
.mega-menu{
background-color: #243A5E99;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0px 4px 16px -6px #00000040;
}
/* New Rule for Mega Menu */
.mega-menu.is-scrolled {
background-color: #FFFFFFE5;
}
.mega-menu.is-scrolled .mega-menu-title {
color: #6489A7;
}
.mega-menu.is-scrolled .mega-menu-item-list .elementor-icon-list-text {
color: #7C8799 !important;
}
(function () {
document.addEventListener('DOMContentLoaded', function () {
var header = document.querySelector('#sticky-header');
var megaMenus = document.querySelectorAll('.mega-menu');
if (!header) return;
var logoImg = header.querySelector('.sticky-header-logo img');
var originalLogoSrc = logoImg ? logoImg.getAttribute('src') : null;
var blueLogoSrc = originalLogoSrc ? originalLogoSrc.replace('LOGO-ITS.svg', 'LOGO-ITS-BLUE.svg') : null;
var threshold = window.innerWidth * 0.3;
var isAlwaysScrolled = (function () {
var path = window.location.pathname || '';
var onNews = path === '/news' || path.indexOf('/news/') === 0;
var onCampusLife = path === '/campus-life' || path.indexOf('/campus-life/') === 0;
var onAgenda = path === '/agenda' || path.indexOf('/agenda/') === 0;
var body = document.body || null;
var isSingle = body && (body.classList.contains('single') || body.classList.contains('single-post'));
return onNews || isSingle || onCampusLife || onAgenda;
})();
function setLogo(scrolled) {
if (!logoImg) return;
if (scrolled && blueLogoSrc) {
logoImg.src = blueLogoSrc;
} else if (originalLogoSrc) {
logoImg.src = originalLogoSrc;
}
}
function handleScroll() {
if (isAlwaysScrolled) {
header.classList.add('is-scrolled');
megaMenus.forEach(function(menu) { menu.classList.add('is-scrolled'); });
setLogo(true);
return;
}
if (window.scrollY > threshold) {
header.classList.add('is-scrolled');
megaMenus.forEach(function(menu) { menu.classList.add('is-scrolled'); });
setLogo(true);
} else {
header.classList.remove('is-scrolled');
megaMenus.forEach(function(menu) { menu.classList.remove('is-scrolled'); });
setLogo(false);
}
}
window.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', function () {
threshold = window.innerWidth * 0.3;
handleScroll();
});
handleScroll();
});
})();
