Menu bar strangeness when using search

Hi there,

can you first try clearing your caches and re-test the site after clearing browser caches.
If still an issue, disable the cache plugins so we can take a closer look.

Hi David,

Thanks for getting back to me. I've cleared the browser cache, and also the Autoptimize and EasyWP caches, but the menu weirdness remains.

Hi Michael,

Try this CSS:

.active:after {
    content: "";
}

Hi Ying,

I've added that to the css but unfortunately it didn't help

Your cache plugin is still on, please disable it and clear cache, clear browser cache as well before you test.
https://www.screencast.com/t/M9ZnDvUr6I

Hi Ying, I cannot disable EasyWP cache (EasyWP hosting do not allow for this), but I have cleared both this and Autoptimize and cleared browser cache. The issue remains.

This CSS should work, but since the cache plugin is still on, the CSS hasn't kicked in to your site, I recorded a short clip:
https://www.screencast.com/t/2uKL2dZbwxbH

I normally don't have an issue with making changes to the theme css not reflecting. I have cleared the cache plugin cache so it should theoretically work? I see I have another active:after for a collapsible menu.

.active:after {
  	content: "\2212";
}

Could this be causing an issue? Do I need to specify the .active:after for the search menu somehow?

The menu has been pushed down because of this pseudo element, I don't know why it's there since your cache plugin is on, I can't see the source. I inspected several GP sites, doesn't see the same issue, so I assume GP doesn't add that content.

You could try this CSS, or try to disable other plugins to find out which plugin is adding this pseudo element.

li.search-item.active.close-search:after {
    content: "";
}

Let me know :)

Hooray! That works - thank you Ying. The joys of CSS.....

Yes, CSS is fun :)
You are welcome!