https://www.thebluegate.com/assets/js/nav-scripts.js

1const targetDiv = document.querySelector('.transparent-bg');
2const toggler = document.querySelector('.navbar-toggler');
3const navLinks = document.querySelectorAll('.nav-link');
4const dropdowns = document.querySelectorAll('.nav-item.dropdown');
5
6let isDropdownHovered = false; // 👈 NEW
7
8function updateScrolledClass() {
9  if (window.scrollY > 0 || isDropdownHovered) { // 👈 MODIFIED
10    targetDiv.classList.add('scrolled');
11  }
12  else if (toggler?.getAttribute('aria-expanded') === 'true') {
13    targetDiv.classList.add('scrolled');
14    targetDiv.classList.add('mobile-nav-expanded');
15  }
16  else {
17    targetDiv.classList.remove('scrolled');
18    targetDiv.classList.remove('mobile-nav-expanded');
19    navLinks.forEach(link => link.classList.add('text-secondary'));
20  }
21}
22
23// Scroll event
24window.addEventListener('scroll', updateScrolledClass);
25
26// Navbar toggler click
27toggler?.addEventListener('click', () => {
28  setTimeout(updateScrolledClass, 10);
29});
30
31// 👇 ADD THIS BLOCK (only new behavior)
32dropdowns.forEach(dropdown => {
33  dropdown.addEventListener('mouseenter', () => {
34    isDropdownHovered = true;
35    updateScrolledClass();
36  });
37
38  dropdown.addEventListener('mouseleave', () => {
39    isDropdownHovered = false;
40    updateScrolledClass();
41  });
42});