[Alanpalazon]

Hi. My issue is that when I click the hamburger menu button to bring up the 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 <nav> element which has an id of “#mobile-menu” and the site logo element that has the class of “.custom-logo”.

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: <nav id=”mobile-menu” tabindex=”-1″ class=”burgermenu-active”></nav>.

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: <nav id=”mobile-menu” tabindex=”-1″ class=””></nav>.

What I’m trying to do with my solution is to check whether the main menu <nav> 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. I only have basic knowledge of web design so my ability to think of a solution is limited.

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

—
JS
—

const burgerNav = document.getElementById(“mobile-menu”); /* This is the main menu <nav> 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 <nav> 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&#8221;); /*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 side menu button.

Thanks

Website: www.aworldover.com

[Author]

Posts