[Resolved] How can I customize the search bar?

[JOSE ALEJANDRO]

Hi, I’m making a multivendor, and my client wants change the earch bar in the nav, something like Amazon, but I dont know how to change it…

And about the search, he wants the results show’s only the products in the website, no the other pages or posts.

Thank you!

[Leo]

Hi there,

CSS is required for modifying the search bar.

If you provide the link to the page in question then I can point you in the right direction.

As for only searching products, see this example:
https://docs.generatepress.com/article/generate_navigation_search_output/#usage

[JOSE ALEJANDRO]

Okay, the websirte is https://pagosemi.com

And I dont want to change the sidebar, I want to change the search of navbar…

Thank you!

[Leo]

So where would like the search bar? Above or below the current navigation/header?

[JOSE ALEJANDRO]

I want the search bar in the nav bar, next to the other items, something like amazon…

[Tom]

Hi there,

You can add a search field to the navigation by adding a new “Hook” element in “Appearance > Elements”.

In the hook content field, add this:

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search..." value="<?php echo get_search_query(); ?>" name="s" />
        <input type="hidden" name="post_type" value="products" />
    </label>
    <input type="submit" class="search-submit" value="&#xf002" />
</form>

In the hook settings, set it to the inside_navigation hook, and execute PHP: http://prntscr.com/l6i2nw

Then add this CSS:

.inside-navigation .search-form {
    float: right;
    line-height: 60px; /* height of your navigation */
}

.main-navigation .search-submit {
    font-family: GeneratePress;
}

Let me know if you need more info 🙂

[JOSE ALEJANDRO]

OMG, Thank you tom!

[Tom]

You’re welcome 🙂

[Philippe]

Hi,
I want to add searchbar on header after website logo and just before social logos (right on header)

But only on home and only on desktop

how can i do it?

Many thanks
Phil

[Ying]

Hi Phil,

Can you open a new topic and link us to your site?

Thanks!

[Author]

Posts