Search icon in menu bar not displaying correctly

[thesurge]

Hi

Just noticed that the menu bar search icon isn’t displaying correctly on iPad Pro running latest ios 15.

weaver, WordPress and all plugins are up to date.

see an example here: https://powisvets.co.uk

I have looked at a couple more websites and they have the same issue.

Also, the search icon in the header on this forum has the same problem.

[scrambler]

You need to be more specific about what you mean by “not correctly”

Also on  desktop, if you reduce the browser size until the mobile menu appears, do you see the same problem?

[thesurge]

On every site I have checked the search icon in the header area or primary menu is displaying as either a white square or circle, so you don’t actually see the magnifier icon as such. One site (tdr-menswear.co.uk) has a white header area/menu background so it looks like the search icon isn’t there at all.

I will check it out on desktop tomorrow.

[scrambler]

OK, so is because the icon is white on a white background.

three options using a CSS rule placed in the yheme global custom CSS box

Change the Icon color

.menu-search .search-form:before {color:blue;}

Add a background to it

.menu-search .search-form:before {backgound-color:grey;}

Change the background of the search box to non white, using the theme option for the search box background

 

[thesurge]

Thanks, I will look at the CSS tomorrow. This seems to have only just happened with the latest iOS / safari update. None of the sites affected had a bad mix of background/icon colour, such as white icon on white background. As mentioned in my first post, this forum has the same issue in the header area.

[scrambler]

I don’t see any issue with the search icon on this site, the icon is black and always visible over the header image

[thesurge]

@scrambler

Does the search icon display correctly for you on iPad OS 15.1? I have checked on 2 iPads and they both have the same issue displaying the search icon in the header or primary menu on all Weaver sites.

When you tap the white square/circle the search box opens up and displays correctly, it is only in the collapsed state that the problem exists.

No issues with this on desktop, resizing the browser window down to the mobile menu is also working correctly, so it seems to be an issue specific to iPad OS 15.1 as far as I can tell. The same problem is also present in Chrome on iPad, so it could be a system setting of some sort that is behind it.

 

[scrambler]

If it is on Ipad I have no way to test, @weaver will have to have a look.

[Author]

Posts