Page 1 of 1

3 bars missing on mobile

Posted: 10 Apr 2020, 17:49
by dsellung
Hi there and thanks a lot for all the work you put into X3! ๐Ÿ‘๐Ÿป

I have a small issue with the menu button on mobile devices (iPad with Chrome and Safari, Android with Chrome):
The button is black until I hit it. Then the 3 white bars are visible, until I go to another page. Same there.

I checked some other websites using X3 but didn't notice this issue, so maybe it's a setting that I made by mistake? I couldn't find any though.

My site: www.dominiksellung.de

Thanks in advance!!

Re: 3 bars missing on mobile

Posted: 11 Apr 2020, 06:52
by mjau-mjau
This is because you have set BLACK skinย primary color (in Style > Skin settings). The primary color is meant to be a contrast to the rest of the website, and will emphasize various BUTTONS (like the sidebar menu). However, if you set it to BLACK (or white), the icons and text that overlay some buttons will not be visible. In the case of your sidebar button, the icon is semi-transparent black overlaying black, which then makes the icon invisible. On the case of HOVER (or touch focus), the icon turns WHITE to emphasize action, thus becomes visible.

In conclusion, really you should be using a COLOR for "primary color" (or grey), that contrasts well with black and white used for icons. If not, you will need to use custom CSS to specify the icon color. Go to settings > custom > custom CSS, and add this:
Code
.sb-toggle > button {
ย  color: white;
}

Re: 3 bars missing on mobile

Posted: 11 Apr 2020, 13:12
by dsellung
Ahh okay, thank you very much for the support! Actually I used custom CSS you suggested. ๐Ÿ˜„