Archived topic
Customizing search bar in header menu
4 replies · Started by mkjj on August 12, 2021
My cutomer complains that the standard search bar in the header menu was barely visible after clicking the magnifier icon. And I must admit that he is not toally wrong. Especially older people are not familiar with this kind of overlay effect. My customer didn't even find the blinking cursor. Since I am the "Don't-make-me-think"-type, I would like to change this. Are there any settings for that? Or do you have a snippet for, say, adding a placeholder text? This would probably much better than just changing the CSS to make the input field more visible.
Hi there,
You can filter how you want the search form to be structured (or just plain placeholder) using the snippet here -
https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder
Or if you only want the placeholder to be changed, use this instead.
https://docs.generatepress.com/article/generate_search_placeholder/
Example usage - https://generatepress.com/forums/topic/change-search-to-another-word-in-the-search-button/#post-1745117
Oh my, I DID search for that, honestly! :-) That's exactly what I need. Excellent! Thank you!
The snippet for the placefolder works great. However, I've found customizing the layout of the input field to be quite tedious. In my humble opinion, the search bar could be implemented a little bit more user-friendly. On some demo sites the input field is full-width with the cursor at the very left of the input field. This works very well on mobile devices, but not so much on large desktop displays. A light input field works well on a dark background like in the Crypto theme. In the Emerald theme, on the other hand, it is a little bit counter-intuitive. You can easily miss the cursor on the light background.
Hi there,
yes, the Nav Search could do with a little love. And we have plans for that in the future.
The nice part about it, is its very simple, and can be easily filtered to change its behaviour.
Color wise those can be changed in the Customizer and it should be addressed in those Library sites.
Thanks for the feedback.
