- This topic has 7 replies, 2 voices, and was last updated 8 years, 1 month ago by
Tom.
-
AuthorPosts
-
March 12, 2018 at 2:52 am #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
LeonMarch 12, 2018 at 10:17 am #518008Tom
Lead DeveloperLead DeveloperHi Leon,
Any idea what the design would look like? I can’t picture a way to add a button that would look good.
March 12, 2018 at 7:28 pm #518296Leon
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
LeonMarch 13, 2018 at 5:37 pm #519270Tom
Lead DeveloperLead DeveloperYou 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 🙂
March 13, 2018 at 7:22 pm #519330Leon
Hi Tom,
I’ve added the HTML. Here is the link: https://forward-plastic.com/
Thank you for the big help!
LeonMarch 13, 2018 at 7:45 pm #519338Tom
Lead DeveloperLead DeveloperGive this a shot:
input.nav-search-submit { width: auto; position: absolute; right: 50px; top: 0; }March 16, 2018 at 3:56 am #521411Leon
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!
LeonMarch 16, 2018 at 10:45 am #521797Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.