For horizontal headers
<script>
window.addEventListener('block-loaded-home-header4', () => {
const headerElements = document.querySelectorAll('header');
const config = { childList: true, subtree: true };
const callback = (mutationList, observer) => {
document.querySelectorAll('header a').forEach((el)=>
{
if(window.location.pathname == el.getAttribute('href'))
{
const span = el.querySelector('span');
if(span) {
for (let i = span.classList.length - 1; i >= 0; i--) {
const className = span.classList[i];
if (className.startsWith('sw-text-color-')) {
span.classList.remove(className);
}
}
span.classList.add("active-link");
}
}
});
};
const observer = new MutationObserver(callback);
headerElements.forEach((he) => {
observer.observe(he, config);
});
});
</script>
<style>
.active-link {
color: red!important;
}
</style>
For vertical headers
<script>
window.addEventListener('block-loaded-header1', () => {
const headerElements = document.querySelectorAll('#header1');
const config = { childList: true, subtree: true };
const callback = (mutationList, observer) => {
document.querySelectorAll('#header1 a').forEach((el)=>
{
if(window.location.pathname == el.getAttribute('href'))
{
const span = el.querySelector('span');
if(span) {
for (let i = span.classList.length - 1; i >= 0; i--) {
const className = span.classList[i];
if (className.startsWith('sw-text-color-')) {
span.classList.remove(className);
}
}
span.classList.add("active-link");
}
}
});
};
const observer = new MutationObserver(callback);
headerElements.forEach((he) => {
observer.observe(he, config);
});
});
</script>
<style>
.active-link {
color: red!important;
}
</style>
Replace home-header4 with your own header name/id, insert into Settings>Custom Code>Header if you are using e.g. home page default header and want to apply it to all the pages or Page Settings>Custom Code>Header for individual page