[Resolved] Align search field in navigation bar

[PROCESO COLECTIVO]

Hi, I need your help with my search field, I want my search field after the menu in navigation bar, the code that I use is this:
the hook

<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 CSS:
`.inside-navigation .search-form {
float: left;
line-height: 60px;
}
.main-navigation .search-submit {
font-family: GeneratePress;
}`

But the search field is always before the menu, do you have a good advice?

[PROCESO COLECTIVO]

Imagen: https://ibb.co/5T4Kg0r

[Leo]

Hi there,

Have you considered using our navigation search option?
https://docs.generatepress.com/article/navigation-search/

If you prefer to use the search field instead, can you try creating a shortcode for it:
https://generatepress.com/forums/topic/search-box-in-the-header/#post-1253293

Then add it using the inside_navigation hook in hooks elements?
https://docs.generatepress.com/article/hooks-element-overview/

Let me know 🙂

[PROCESO COLECTIVO]

Thanks for your answer, I´m going to use the navigation search option, but I want to ask is there a way to put the word search before the icon in the navigation search.

thanks for your advice

[Tom]

Hi there,

This should help: https://generatepress.com/forums/topic/how-to-add-some-text-before-the-navigation-search-icon/#post-963030

[PROCESO COLECTIVO]

Thanks for your help at the end Use this little modification

.search-item a:before {
    content: "\f002";
		 font-family: GeneratePress;
}
.search-item a:after {
    content: " BUSQUEDA";
    font-family: Brown-Regular;
}

[Tom]

Glad I could help 🙂

[Author]

Posts