Mega Menu highlight active anchor links

Site URL: https://mcnaegroup.squarespace.com/

Password: studio@mcnaegroup6

I've used the Will Myers Mega Menu.

Is it possible to code the links in the folder to be blue when not active and red when active? This menu is has of alot of anchor links so I'm not sure if this is possible. 
Currently when a section is active (e.g the solar section) then the whole dropdown folder highlights red. I would like it to highlight only the page your on (e.g. Residential Solar), not the whole folder.

I think you will need complex javascrip code to do this. You can consider hiring a dev to handle this.

If you have no budge, you can post to Squarespace Customization Resource Group (on Facebook) to find help.

@S74 Based on my experience with CSS, I don't think you will need any JavaScript to achieve what you need; you just need to use CSS child selectors. I can take a look and give you the code to use, but it seems like the password you mentioned in the above post is not working anymore. Do you have an updated one?

On 2/11/2022 at 1:00 PM, Caroline_Smith said:

@S74 Based on my experience with CSS, I don't think you will need any JavaScript to achieve what you need; you just need to use CSS child selectors. I can take a look and give you the code to use, but it seems like the password you mentioned in the above post is not working anymore. Do you have an updated one?

wow, I would love for you to have a look. the password is now:

studio@mcnaegroup7

17 hours ago, S74 said:

wow, I would love for you to have a look. the password is now:

studio@mcnaegroup7

I actually think I might've misunderstood your question: did you mean you want the item menu that is currently being hovered over/active to be red (like the second picture), or you want the actual menu section to in the mega menu to be highlighted red when you are actually on that page?

I thought you meant the first way, but in the event you want the second way, you would need some JavaScript like  @tuanphan said. Here is some JavaScript that worked on your site when I tested it. In order for it to work, you will need to remove the first CSS rule wherever you added it on your site, because the "!important" tag is preventing it from working. I already added a way to highlight the active menu link in the solution below:

First, remove this code:

.header-nav-item--active a {

color: #e11837 !important;

}

Then, add this code to your website footer code injection:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    var currentPagePath = window.location.href.toString();
    $(".header-nav-item--active > a").css("color", "#e11837")
    $(".header-nav-item--active .page-section a").each(function() {
      if (currentPagePath.endsWith($(this).attr("href"))) {
        $(this).css("color", "#e11837");
      }
    });
  });
</script>

18 hours ago, Caroline_Smith said:

I thought you meant the first way, but in the event you want the second way, you would need some JavaScript like  @tuanphan said. Here is some JavaScript that worked on your site when I tested it.

WOW!

Thank you so much for your help! This is a huge improvement, and I can’t thank you enough.
One minor problem I ran into is if you click on a link in the mega menu (like ‘Why Solar’ for example) it high lights beautifully, but if you go back to the mega menu and try to click on a link that’s actually on the same page (like ‘Our Process’) it doesn’t highlight.

I can’t imagine this would be too much of a problem, because if your on the page, you shouldn’t be clicking on those links anyway – but just something to note.

Maybe I can convince my client to alter the menu slightly so people know these links are on the same page.

Again I can’t thank you enough! And I really appreciate your help xxxxx

No problem - glad I could help!