Archived topic
search box
5 replies · Started by Hiroki on April 11, 2022
Now only search icon is displayed, and when selected, the box expands to the full width of the header.
Please tell me how to display a search box of a certain length under normal conditions.
Hi Hiroki,
To clarify, what do you mean by “normal conditions”? Are you wanting to modify the width only on desktop?
If so, here is a CSS you may try adding in Appearance > Customize > Additional CSS:
@media (min-width: 1025px) {
form.search-form.navigation-search {
width: 50%;
margin-left: auto;
}
}
Kindly let us know if you’re wanting something else. It might help if you can create a sketch of the look you’re going for.
Hope to hear from you soon. :)
Amazon, Twitter, etc. have a search space without clicking the search icon.
I also wanted my site to display the search space from the beginning.
I see. If that’s the case, you can try creating a Block Element with a WordPress Core - Search Block as such: https://share.getcloudapp.com/L1uR9NX2
As shown, the Block is hooked to after_primary_menu and displayed in the Entire Site.
You can then use custom CSS to modify this.
Hope this clarifies. :)
Perfect!
Thank you Fernando!
You’re welcome Hiroki! Feel free to reach out anytime if you’ll need further assistance regarding this. :)