Site logo

Archived topic

search box

5 replies · Started by Hiroki on April 11, 2022

Viewing posts 1–6 of 6

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. :)

This archived topic is closed to new replies.