search button on primary navigation

Hi Leon,

Any idea what the design would look like? I can't picture a way to add a button that would look good.

Hi Tom,

I was thinking that after clicking the search icon, the search button will appear right at the place where the cross icon appears now, or next to it.

I know that the cross icon was to exit search, but you can also exit by clicking non searching area, which is quite a natural response for users to do so.

Im not a designer... But a button with the text "search" seems necessary for those who are used to clicking it rather than hitting the enter on the keyboard.

Thanks
Leon

You can add the button HTML like this:

add_filter( 'generate_navigation_search_output', 'tu_nav_search_button' );
function tu_nav_search_button() {
	printf(
		'<form method="get" class="search-form navigation-search" action="%1$s">
			<input type="search" class="search-field" value="%2$s" name="s" title="%2$s">
			<input type="submit" class="nav-search-submit" value="Search" />
		</form>',
		esc_url( home_url( '/' ) ),
		esc_attr( get_search_query() ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
}

Then we'll have to style it with some CSS. Let me know when the above is added, and link me to the page :)

Hi Tom,

I've added the HTML. Here is the link: https://forward-plastic.com/

Thank you for the big help!
Leon

Give this a shot:

input.nav-search-submit {
    width: auto;
    position: absolute;
    right: 50px;
    top: 0;
}

Hi Tom,

Thank you. I've added a few more lines of css to match my color scheme. Now it works as expected.

Thank you!
Leon

You're welcome :)