[Resolved] Search text overlaps Menu on mobile

[Deirdre]

Hi, anytime I attempt to use the search function on mobile all the writing I type in appears on the left behind my menu header and is difficult to see (and ugly).

https://www.thefieryvegetarian.com/peri-peri-sauce-recipe/

(for example)

[David]

Hi there,

How about moving the search field below the header ? Try this CSS:

@media(max-width: 768px) {
    .navigation-search.nav-search-active {
        top: 100%;
    }
}

[Deirdre]

That works great on posts but now pages have a strange “skip to content” and ugly grey menu button under it *e.g. this page on mobile https://www.thefieryvegetarian.com

[David]

I am not seeing that issue – can you try clearing plugin / browser caches.

[Deirdre]

Ah yes, apologies, that does fix it, I’m not sure why but even with the caches cleared it was doing something strange unless I used incognito mode, thank you!

[David]

Glad to hear that

[Author]

Posts