Archived topic
Text under search bar
5 replies · Started by Den on March 14, 2021
I want to show a text like “Search Here” under the search bar.
How to do it? 🙂
Example - https://www.educba.com/html-search-bar/ their search bar contains "Search for Tutorials / Courses"
Hi Den,
Are you referring to GP's navigation search option?
Let me know :)
Yes Leo :)
I just want to show a simple text "Search Here" in my search bar so visitors can easily know where they have to find the query.
website link in private information
Hi Den,
It seems you already have added some text when search icon being hovered, isn't that good enough?
https://www.screencast.com/t/FF1BHzmp
The navigation search doesn't have a search bar showing all the time unless it's clicked, so where would you like the text to be?
And will you add any menu item into the navigation in the future? It's currently empty.
Let me know :)
Hi,
I'm planning to remove that as it only works when someone hovers on that tiny magnifying glass (i mean the icon). (that most visitors ignore OR just can't see that it's there)
So, I just want to show a simple text "Search Here" right before the search icon, so visitors can know the place to write down their search query.
No, I will not add any menu item into the navigation in the future as well :)
Hi there,
So, I just want to show a simple text “Search Here” right before the search icon, so visitors can know the place to write down their search query.
Do you have a mockup of how exactly you want it to be laid out?
Do want it to look like this? https://share.getcloudapp.com/wbu9EZRx
If so, try changing the placeholder text for the search bar to "Search Here".
You then add this CSS to transfer the alignment of the search icon.
form.mega-search.mega-search-open input[type=text]{
padding-left: 10px !important;
}
form.mega-search.mega-search-open span.fa.fa-search.search-icon {
margin-left: auto;
}