S74 Posted December 20, 2021 Share Posted December 20, 2021 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. Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 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 1 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
Caroline_Smith Posted February 11, 2022 Share Posted February 11, 2022 @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? Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
S74 Posted February 24, 2022 Author Share Posted February 24, 2022 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
Caroline_Smith Posted February 24, 2022 Share Posted February 24, 2022 (edited) 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 February 24, 2022 by Caroline_Smith S74 1 Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
S74 Posted February 24, 2022 Author Share Posted February 24, 2022 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 Caroline_Smith 1 Link to comment
Caroline_Smith Posted February 24, 2022 Share Posted February 24, 2022 No problem - glad I could help! Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment