Jump to content

Mega Menu highlight active anchor links

Recommended Posts

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.

Screen Shot 2021-12-21 at 11.54.21 AM.png

Screen Shot 2021-12-21 at 11.54.29 AM.png

Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

@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?

Link to comment
  • 2 weeks later...
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

Link to comment
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>

Edited by Caroline_Smith
Link to comment
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.