[Resolved] header search box

[Chris]

1. This is how my current search box looks like: http://prntscr.com/qeg62z. How do I make it look like this: http://prntscr.com/qeg657.

[David]

Hi there,

is that the Navigation search you’re looking to ‘change’?

[Chris]

Correct 🙂

[David]

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.

[Chris]

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

[David]

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;
}

[Chris]

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.

[David]

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 🙂

[Chris]

That worked!

Amazing support!!! Thank you 🙂

[David]

You’re welcome

[Author]

Posts