Highlight the page on the header that you are currently viewing

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

1 Like

Hi Maria.

Thank you very much, but unfortunately I’m having problems with this code.

It turns all my links red. Not just the one on the active page…

Do you have an updated code please?

Thks

Hi @clem_kyrro the codes are fresh so they should work. Could you please, provide the screenshot of where exactly you added the code and also the published page link? you can DM as well