How to dynamically change my site logo when a different HTML element is clicked

[alanpalazon]

Hi. My issue is that when I click the hamburger menu button on my website, which brings up a side menu, my site logo disappears. This is because I have the side menu background colour set to white and my logo is also white.

Therefore, when the side menu is showing, I want to load a different colour logo image so that it stands out against the white background. When the side menu is not showing, I want my normal white logo image to display.

I am trying to do this dynamically with JavaScript and CSS, so far to no avail. The HTML elements that I’m trying to work with are the main menu element which has an id of “#mobile-menu” and the site logo element that has the class of “.custom-logo”.

I have very basic knowledge of web design, but when I look in dev tools, as far as I can tell, the way that the side menu appears is that when the hamburger menu button is clicked, a CSS class of ‘.burgermenu-active’ is dynamically added to the main menu nav bar which gives the nav bar new styling turning it into the side menu. Here’s the HTML: .

And when you exit the side menu, the CSS class ‘.burgermenu-active’ is removed and the nav bar returns to its normal main menu state. Here’s the HTML for that: .

What I’m trying to do with my solution is to check whether the main menu element has the CSS class of ‘burgermenu-active’. If it does, then it means that the side menu is currently showing. Therefore, I then want to target the site logo element and change its content url by adding a new CSS class of ‘.side-menu-logo’ to the element that applies the desired styling. When I exit the side menu, the CSS class that I have dynamically added to the site logo element should then be dynamically removed and my normal site logo should display.

I have tried the following solution to no avail. Can someone tell me where I’m going wrong or suggest an alternative solution, perhaps one that only requires CSS, as that would be much lighter page speed-wise etc.
————————————————————————————————–

—
JS
—

const burgerNav = document.getElementById(“mobile-menu”); /* This is the main menu element I want to target */

const siteLogo = document.querySelector(“img.custom-logo”); /This is the site logo element I want to change when the side menu is showing/

var hasClassName = burgerNav.classList.contains(“burgermenu-active”); /This checks if the main menu element has the CSS class of ‘burgermenu-active’/

if (hasClassName){
siteLogo.classList.add(‘side-menu-logo’);
} else {
siteLogo.classList.remove(“side-menu-logo”);
}

—
CSS
—

img.side-menu-logo {

content: url(“https://www.aworldover.com/wp-content/uploads/2023/05/blog-logo-black-240-240.png”); /the new logo to display when side menu is showing/

}

————————————————————————————————–

Hopefully I’ve explained myself clearly. Let me know if I need to explain something differently. And please feel free to see the issue for yourself on my website by clicking the hamburger menu button.

Thanks

Website: https://www.aworldover.com/

[PaulOB]

@alanpalazon

https://www.aworldover.com/wp-content/uploads/2023/05/blog-logo-black-240-240.png”

If I understand correctly you can do this in CSS alone as you already have a class added by the js that you can use.

I would do something like this.

.burgermenu-active #logo img {
  opacity: 0;
}

.burgermenu-active #logo {
  display: inline-flex;
  width: 90px;
  height: 90px;
  background: url(https://www.aworldover.com/wp-content/uploads/2023/05/blog-logo-black-240-240.png);
  background-size: contain;
}

You’ll have to use a better image as that one has too much white space and doesn’t match the 90x90 of the original.

(Note that in your original code you were trying to add a content property value to an img tag which is not possible as an image is replaced content and the content property is only supposed to be used on:before and :after pseudo classes which don’t apply to replaced properties.)