Site logo

Archived topic

Change Search Box Input

6 replies · Started by William on September 29, 2022

Viewing posts 1–7 of 7

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:desired search box

Current: current search

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.

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!

This archived topic is closed to new replies.