Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing color of Nav element when its active


stringbryce

Question

  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: http://aldenteenoteca.com Hey can someone provide me with code to change the color of the nav item when its on that page, tried looking everywhere else not working  

Add this into Advance-Code injection, change color red to whatever you like <style> .header a.active-page { color: red !important; } </style> <script> document.addEventListener

Posted Images

2 answers to this question

Recommended Posts

  • 0
On 4/11/2021 at 4:22 PM, stringbryce said:

Site URL: http://aldenteenoteca.com

Hey can someone provide me with code to change the color of the nav item when its on that page, tried looking everywhere else not working

 

Add this into Advance-Code injection, change color red to whatever you like

<style>
.header a.active-page {
  color: red !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {	
	var currentPage = location.hash ? location.pathname + location.hash : location.hash;
	var _a = document.querySelectorAll('.header a[href*="'+currentPage+'"]');

	for (var i = 0; i < _a.length; ++i) {
	  _a[i].className += _a[i].className + " " + "active-page";
	}  
});

</script>

image.thumb.png.2fc7641fa9ed66e16950237861efaff3.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Animated Heading Block
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...