[Resolved] Menu bar strangeness when using search

[Michael]

Hi guys,

I hope you are well. I’m experiencing an issue whereby my menu bar is behaving erratically when I am searching. It does not seem to do this in every instance so it’s quite hard to work out what is causing it. Here are a couple of screenshots to highlight what I mean:

https://www.dropbox.com/s/3h5hrhwwgx5qpnz/search1.jpg?dl=0

https://www.dropbox.com/s/1cgarupme5evxtr/search2.jpg?dl=0

Our site is:

https://reclaimdesign.org

Please can you help me fix it? Thank you very much.

Michael.

[David]

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.

[Michael]

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.

[Ying]

Hi Michael,

Try this CSS:

.active:after {
    content: "";
}

[Michael]

Hi Ying,

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

[Ying]

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

[Michael]

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.

[Ying]

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

[Michael]

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?

[Ying]

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 🙂

[Michael]

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

[Ying]

Yes, CSS is fun 🙂
You are welcome!

[Author]

Posts