header search box

Hi there,

is that the Navigation search you're looking to 'change'?

Correct :)

Not possible to customize the nav search like that ... what you can do is Hook in your own custom search box.

1. Create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

2. Add the code i provide here for the custom search field:
https://generatepress.com/forums/topic/change-search-widget-with-an-icon/#post-1068701

3. Select the inside_navigation hook and set the Display Rules for the Entire Site.

Once thats done if you can share a link to the site i can help with the CSS to style it.

Done. I edited the post to include my website URL.

Try adding this CSS:

.custom-search-form {
    background-color: #fff;
    order: 5;
}

.custom-search-form input[type="search"],
.custom-search-form button {
    background-color: #fff;
    border: 0;
    max-width: 200px;
}

That works! Is there a way to make the search box a bit smaller?

Also, the search operation seems like it doesn't pick up anything. For example, one of my blog posts title is "testing". When I type "testing" in the search box, it doesn't show the post.

1. In the CSS above edit the max-width: 200px; - make that value smaller to reduce the size.

2. The code you added in the Hook Element ... this line:

<form method="get" class="custom-search-form" action="site-url">

You need to update site-url to match your sites url :)

That worked!

Amazing support!!! Thank you :)

You're welcome