CODEWITHSUNDEEP
javascripthtmlcss
ViktorasssIT
ViktorasssIT

Reputation: 387

How to change logo src, when clicked on hamburger menu?

When clicked on hamburger menu, I want to change the brand logo color (src) with another SVG image, because the background doesn't fit.

OnClick hamburger change Brand logo with another image

How could I do that?

I know how to change with an event.listener the element who is being clicked, not other element which I need

const navSlide = () => {
const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.header__links');
const navLinks = document.querySelectorAll('.header__links a');   

hamburger.addEventListener('click', () => {
    // toggle nav
    nav.classList.toggle('header__nav-active');

    // animate links 
    navLinks.forEach((a, index) => {
        if (a.style.animation) {
            a.style.animation = '';
        } else {
            a.style.animation = `navLinkFade 0.5s ease forwards ${index / 6 + 0.3}s`;
            a.style.color = `#ffffff`;
        }
    });
});
}

 navSlide();

I have this following JS code. I need to change logo on click hamburger, else, stay the same .

Upvotes: 1

Views: 1323

Answers (2)

Neha Sharma
Neha Sharma

Reputation: 772

I assumed that the logo is outside the hamburger container. Here is the code of changing the image:

https://codepen.io/NehhaSharma/pen/QWWqxXL?editors=1010

Thanks

Upvotes: 0

Zerhogi
Zerhogi

Reputation: 341

something like this can help you:

hamburger.addEventListener('click', () => {
    document.querySelector('.yourBrandLogoImg').src = "some/path/to/logo.svg";
}

and if you want toggle this src you can do something like this:

hamburger.addEventListener('click', () => {

    if (nav.classList.contains('header__nav-active')){
        document.querySelector('.yourAnotherImg').src = "some/path/to/anotherImg.svg";
    }else{
        document.querySelector('.yourBrandLogoImg').src = "some/path/to/yourLogo.svg";
}

Upvotes: 1

Related Questions