[Support request] Change Search Box Input

[William]

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:

[William]

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.

[Ying]

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?

[William]

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!

[Ying]

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;
}

[William]

Wow Ying, that’s terrific!

[Ying]

Glad to hear that 🙂

Let me know if there’s anything else regarding the search bar!

[Author]

Posts