[Resolved] search button on primary navigation

Home Forums Support [Resolved] search button on primary navigation

Home Forums Support search button on primary navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #517586
    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

    #518008
    Tom
    Lead Developer
    Lead Developer

    Hi Leon,

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

    #518296
    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

    #519270
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #519330
    Leon

    Hi Tom,

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

    Thank you for the big help!
    Leon

    #519338
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    input.nav-search-submit {
        width: auto;
        position: absolute;
        right: 50px;
        top: 0;
    }
    #521411
    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

    #521797
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.