[Resolved] search box

[Hiroki]

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.

[Fernando]

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. 🙂

[Hiroki]

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.

[Fernando]

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. 🙂

[Hiroki]

Perfect!
Thank you Fernando!

[Fernando]

You’re welcome Hiroki! Feel free to reach out anytime if you’ll need further assistance regarding this. 🙂

[Author]

Posts