Docs

[Effecticore]

Hello!

Working on my new website, progressing nicely. Two questions have arisen:

1) The Mobile Menu currently is “invisible” because it is white on white background. Where can I change the color of the menu?

2) I am using a left side menu and the logo image I use is rather high. When switching to a mobile screen this does not look nice. Is there a way to set a different logo file for smaller screens?

Thanks and best
Lutz

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Effecticore]

This reply has been marked as private.

[Friech]

Hi Lutz,

Thanks for the credentials, #1 You can add this under Custom > Global CSS in the Customizer.

.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover {
	color: #333;
}

#2 Add this on Custom > Global JavaScript

jQuery(document).ready(function($){
	var width = $(window).width();
	var logo_src = $(".x-brand img").attr("src");
	
	if(width < 980) {
		$(".x-brand img").attr("src", "path/of/your/mobile/logo");
	}
	else {
		$(".x-brand img").attr("src", logo_src);
	}
});

Replace the /path/of/your/mobile/logo.png with your actual mobile logo URL.

Hope it helps, Cheers!

[Effecticore]

Hi there,

thanks for the quick help. I tried the code for topic 1).
Now I get a black burger menu when hovering over it. But it still is “invisible”=white when not mouseovering.
What else do I have to put in to make the menu visible?

Thanks and best
Lutz

[Christopher]

Hi there,

Please add this CSS to customizer as well :

.x-btn-navbar.collapsed {
    color: red;
}

Thanks.

[Author]

Posts