[Resolved] search button on primary navigation

[Leon]

Hi Tom,

I love the way the navigation search is designed.

However, a friend of mine prefers that after clicking the search icon, there should also be a search button there for clicking. Right now, the only way to process searching is by hitting enter on the keyboard.

Is this something that I can configure with the current theme? If not, do you have a way to achieve this please?

Thanks
Leon

[Tom]

Hi Leon,

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

[Leon]

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

[Tom]

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 🙂

[Leon]

Hi Tom,

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

Thank you for the big help!
Leon

[Tom]

Give this a shot:

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

[Leon]

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

[Tom]

You’re welcome 🙂

[Author]

Posts