How can I change the active menu color in the impulse theme

[MKsac]

Hi,

I am using the impulse theme and there is no option to change the color of an active menu link.

Need to enable this for both Header and Footer menus.

Can you guys help me do this please?

Thanks,

[Moeed]

Hey @MKsac 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[MKsac]

Please check the bellow link

https://pii9kzmodgws3iew-68671242419.shopifypreview.com

Thanks.

[Moeed]

Hey @MKsac 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
document.addEventListener('DOMContentLoaded', function () {
    const menuLinks = document.querySelectorAll('header a, footer a');
    menuLinks.forEach(link => {
        if (link.href === window.location.href) {
            link.classList.add('active-link'); 
        }
    });
});
</script>

<style>
header .active-link,
footer .active-link {
    color: red;
    font-weight: bold;
    text-decoration: underline;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Ahmad31]

1. Open Online Store > Themes > Actions > Edit code.
2. Locate the main JavaScript file (often named theme.js, main.js, or similar). If unsure, you can also add this script in the theme.liquid file inside a <script> tag.
3. Add the following JavaScript code between <script></script> tag:

document.addEventListener("DOMContentLoaded", function() {
    // Select all menu links
    const menuLinks = document.querySelectorAll(".site-nav__link");
    const currentPath = window.location.pathname;

    // Loop through each link and check if it matches the current URL
    menuLinks.forEach(link => {
        if (link.href.includes(currentPath)) {
            link.classList.add("active");
        }
    });
});
​

• Add the following CSS to your theme's main CSS file (e.g., theme.css, style.css, or custom.css):

/* Active menu link styling */
.site-nav__link.active {
    color: #FF5733 !important; /* Replace with your desired color */
    font-weight: bold; /* Optional: Make it bold */
    text-decoration: underline; /* Optional: Underline the link */
}

/* Optional: Active state for dropdown links */
.site-nav__dropdown .site-nav__link.active {
    background-color: #f0f0f0; /* Highlight dropdown active link */
}
​

• Save your changes.
• Refresh your Shopify site.