Archived topic
Align search field in navigation bar
6 replies · Started by PROCESO COLECTIVO on April 30, 2020
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="" />
</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?
Imagen: https://ibb.co/5T4Kg0r
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 :)
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
Hi there,
This should help: https://generatepress.com/forums/topic/how-to-add-some-text-before-the-navigation-search-icon/#post-963030
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;
}Glad I could help :)
