Mobile menu button remain white in Safari (iPhone) despite color change in CSS

[CyberBengt]

I’m using X with Ethos theme and have changed the color of the mobile nav button. It works fine everywhere except for Safari on iPhone. With Chrome on iPhone there is no problems.

On iPhone (and iPad) the button stays white (I want it red) until I touch it (hover). Then it toggles to red and stays red until I click outside the button.

I use this CSS code (and have tried other combinations):
a#x-btn-navbar {
color: #9b2524 !important;
}

I can’t find any applicable -webkit code for this. What have I missed?

Here is the staging site: https://zynk.se/kundtester/atpcargo/

Best regards
Bengt

[rad]

Hi Bengt,

Thanks for reaching out.

The reason it’s not working on iPad is because your CSS is wrapped within @media (max-width: 767px) {, which makes it only work on phones. It should be in range of 979px

As for the iPhone’s Safari, It displays correctly with color #9b2524. May I know which iOS version you’re testing it with?

Thanks!

[CyberBengt]

Hi Rad,

thank’s for looking into this.

Now I don´t have any problems with Safari on iPad, but still on iPhone. I run the latest iOS 12.4.1.

Please see the enclosed images. Img 1 shows the standard look before I touch the area with the menu button, and Img 2 after touching the right area (which I know were it is but not my visitors).

[christian]

Hey @CyberBengt,

I checked your site in an iPhone the mobile menu button is visible. Please clear your browser’s cache and check again. Also, try checking in incognito and other browsers.

Thanks.

[CyberBengt]

Thanks Christian for your help.
It worked with som cache clearing, not just the refresh button.

[ruenel]

Hey @CyberBengt,

You are most welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.