Nav Dropdown CSS

Hey everyone, 

I need help with styling our navigation bar: www.divemedia.com.au

We have implemented a bit of code so far to add a hover effect and an active/clicked effect. 

All was working perfectly until we have started adding new pages and now have a dropdown ('Resources'). We will be adding more dropdowns this month, so I want to try and understand and get ahead of this issue (if possible). 

Basically, the 'active' effect isn't working on the dropdown.

Here's the current CSS related to the nav bar: 

//Dropdown styling - centre aligning nav + text, rounded dropdown //

div.header-nav-folder-content {
    left: 50% !important;
    transform:translateX(-50%) !important;
}

.header-nav-folder-content { 
text-align:center !important;
border-radius:25px}

// Active Link Border Pill Style //

.header-nav-item--active>a, .header-nav-folder-item--active a {
  color: #171E38 !important;
  border: 1px solid #171E38 !important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
 background-image: none !important;
}

// Header Navigation - Pill Hover Style //

.header-nav-item a {
  padding: 5px 12px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}

.header-nav-item a:hover {
  background: #FBFBF8;
  color: #F05443 !important;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}

The styling is working well for the regular navigation bar but I've searched and tried hundreds of different codes for the dropdown active state and nothing has worked. 

I want to have the same active effect from the other menu options also reflected on the dropdowns. 

I understand that 'Resources' in the nav bar is technically not a page, so that could make this an issue. Here's the code injected in our footer: 

<!-- Clickable Navigation Dropdowns on Squarespace 7.1 ----------------------------------->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var link = document.querySelector('a.header-nav-folder-title[href="/resources-nav"]');
  
  if (link) {
    link.addEventListener('click', function(event) {
      event.preventDefault();
      window.location.href = '/resources';
    });
  }
});
</script>
<!-- End of Clickable Navigation Dropdowns ----------------------------------------------->

So as you can see, the navigation is technically /resources-nav when the page goes to /resources. I can see how this may affect the active state of the link but hoping there's a solution...

Thanks in advance, let me know if there are any questions! 

@DiveMedia Hi! Add this code under Website > Pages > Website Tools > Code Injection > Header

 <script>
        document.addEventListener('DOMContentLoaded', function () {
            var targetURL1 = '/resources';
            var targetURL2 = '/services';
            var currentPath = window.location.pathname;
            if (currentPath === targetURL1 || currentPath === targetURL2) {
                var targetLink = document.querySelector('.header-nav-folder-title');
                if (targetLink) {
                    targetLink.classList.add('active-nav-folder-title');
                }
            }
        });
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
      var currentPath = window.location.pathname;
      var navLinks = document.querySelectorAll('.header-nav-folder-content .header-nav-folder-item a');
      navLinks.forEach(function (link) {
          if (link.getAttribute('href') === currentPath) {
             link.classList.add('active-nav-folder-item');
          }
      });
});
</script>

<style>
.active-nav-folder-title, .active-nav-folder-item {
  color: #171E38 !important;
  border: 1px solid #171E38 !important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
  background-image: none !important;
}
span.header-nav-folder-item-content {
  background-image: none !important;
}
.header-nav-folder-item a {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto;
}
.active-nav-folder-title:hover, .active-nav-folder-item:hover {
  background: #FBFBF8;
  color: #F05443 !important;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}
</style>

Let me know how it goes. Thanks!

Fabulous, thank you so much for your guidance 🙂 

56 minutes ago, Lesum said:

@DiveMedia Hi! Add this code under Website > Pages > Website Tools > Code Injection > Header

<script>
 document.addEventListener('DOMContentLoaded', function () {
      var targetURL = '/resources';
      var currentPath = window.location.pathname;
      if (currentPath === targetURL) {
          var targetLink = document.querySelector('.header-nav-folder-title');
          if (targetLink) {
              targetLink.classList.add('active-nav-folder-title');
          }
      }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
      var currentPath = window.location.pathname;
      var navLinks = document.querySelectorAll('.header-nav-folder-content .header-nav-folder-item a');
      navLinks.forEach(function (link) {
          if (link.getAttribute('href') === currentPath) {
             link.classList.add('active-nav-folder-item');
          }
      });
});
</script>

<style>
.active-nav-folder-title, .active-nav-folder-item {
  color: #171E38 !important;
  border: 1px solid #171E38 !important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
  background-image: none !important;
}
.header-nav-folder-item a {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto;
}
.active-nav-folder-title:hover, .active-nav-folder-item:hover {
  background: #FBFBF8;
  color: #F05443 !important;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}
</style>

Let me know how it goes. Thanks!

Hey Lesum, 

All is looking great, you can see the changes live: www.divemedia.com.au. The only issue now, is within the dropdown, when active the item now has the pill outline but ALSO the stock underline from Squarespace. How do I get rid of the underline?

1 hour ago, Lesum said:

@DiveMedia Hi! Add this code under Website > Pages > Website Tools > Code Injection > Header

<script>
 document.addEventListener('DOMContentLoaded', function () {
      var targetURL = '/resources';
      var currentPath = window.location.pathname;
      if (currentPath === targetURL) {
          var targetLink = document.querySelector('.header-nav-folder-title');
          if (targetLink) {
              targetLink.classList.add('active-nav-folder-title');
          }
      }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
      var currentPath = window.location.pathname;
      var navLinks = document.querySelectorAll('.header-nav-folder-content .header-nav-folder-item a');
      navLinks.forEach(function (link) {
          if (link.getAttribute('href') === currentPath) {
             link.classList.add('active-nav-folder-item');
          }
      });
});
</script>

<style>
.active-nav-folder-title, .active-nav-folder-item {
  color: #171E38 !important;
  border: 1px solid #171E38 !important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
  background-image: none !important;
}
.header-nav-folder-item a {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto;
}
.active-nav-folder-title:hover, .active-nav-folder-item:hover {
  background: #FBFBF8;
  color: #F05443 !important;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}
</style>

Let me know how it goes. Thanks!

Thank you Lesum! Angel!! 🙂