Highlight the page on the header that you are currently viewing

[Maria]

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

[clem_kyrro]

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

[Maria]

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

[haraldpalma]

@Maria - Great code - thank you very much for posting it. I adjusted it a little bit.

1. Added a hover state
2. Included multiple headers

use it:

• Change the values of home-header2, home-header3, and so on
• Change the colors in the CSS
• If your button has a different class, address it differently (e.g., .btn)

I’m happy to receive feedback!

<script>
function initializeHeader() {
    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);
    });
}
window.addEventListener('block-loaded-home-header2', initializeHeader);
window.addEventListener('block-loaded-home-header3', initializeHeader);
window.addEventListener('block-loaded-home-header4', initializeHeader);
</script>	
<style>
    .active-link {
        color: #DF0A25!important;
    }
    header a:not(.btn):hover span {
        color: #9EA5B4!important;
        transition: color 0.3s ease;
    }
</style>

[jak]

Hey:) I’d love to use this for my vertical menu so the active item is highlighted but cant seem to get it to work. My header id is home-header1. Any ideas why?

EDIT: As soon as I changed my header id to “header1” it worked

[daffinm]

This is such a typical requirement that I think it should be part of the standard configuration for a header block. The problem with custom code that is based on the current structure of the html and css is that when this changes, as a result of a block update, then the code breaks. The structure of the html and css is not what you would call a stable API

[brettjw]

got the code working, thank you!

any idea what the code would be for a hover effect where both text color and also the block color change, like this?

also how to get those white icons in place?

thank you!