[Resolved] How to Fix mobile menu search field after last theme update?

[Atef]

Hi,
After I updated the theme this morning, I noticed that the search field I have in the mobile sticky header is not shifted down, and displaying worngly.
I cleared all cache..etc.

here is how it displays now:
http://prnt.sc/pzvm0n

Here is how I added the search field:
https://generatepress.com/forums/topic/changing-mobile-menu-magnifying-glass-to-a-search-field/

I haven’t changed any css in the website, so it could be due to theme upgrade.

Can you please help me fix this issue?

This is the code I have for this field:

/* styling of mobile menu search bar */
.mobile-menu-header-search {
	width: 57%;
	height: 1em;
	margin: 5px;	
}

.mobile-menu-header-search .search-submit {
	display: none;
}

.mobile-menu-header-search .search-field {
border-radius: 10px;
}

.menu-toggle {
	padding-right: 0.5em !important;
	padding-left: 0.5em !important;
}

/* End of styling of mobile menu search bar */

[David]

Hi there,

So in your first CSS rule change the height to line-heightie.

.mobile-menu-header-search {
	width: 57%;
	line-height: 1em;
	margin: 5px;	
}

Then add this CSS:

.mobile-menu-header-search label {
    margin-bottom: 0;
}

[Atef]

Hi David,
Thanks a lot for your reply.

I changed the code as per your instructions, dleted all cache twice, tried from 3 different browsers, and the problem is still the same.
can you please advise what other steps can be done?
thanks

[David]

The original CSS is still locked in your WP Rocket Critical CSS.

[Atef]

Hi David,
You are right. I am sorry about this.
now it is all good.
cheers for your help.

[David]

No problems – glad to be of help.

[Author]

Posts