Archived topic
Change Search Box Input
6 replies · Started by William on September 29, 2022
I'd like to change the search box from overlaying the menu, with a close box at the input point, to being a separate input box, below the magnifying glass icon. Any thoughts on where to start?
Desired:
Current: 
I realize I need to find the input code to add placehoder="Search", to get:
<input type="search" class="search-field" placeholder="Search" value="" name="s" title="Search">
Not sure where that is in the template. And I can style the box with css for positioning, but that won't bring the close icon along with it.
Hi William,
To add place holder, try this snippet:
https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder
For the style, can you link me to your site?
Ying, spot on for the add placeholder, thank you.
Here's a link to the site: https://focusphotography.com/recent/newagen-seaside-inn-wedding/
Thank you so much!
Try this CSS, you can adjust the values to tweak the position/width/color.
form.search-form.navigation-search.nav-search-active {
top: 40px;
width: calc(100% + 200px);
left: -216px;
border:1px solid black;
padding:8px;
background-color:white;
}
@media (max-width: 768px) {
form.search-form.navigation-search.nav-search-active {
width:100%;
left:0;
top:0;
}
}
.navigation-search input[type="search"] {
border: 1px solid grey;
}
Wow Ying, that's terrific!
Glad to hear that :)
Let me know if there's anything else regarding the search bar!