PASS: osgBoats
We’re using the Prestige theme by Maestroo, and Searchinise for our search engine. I built a custom search field that displays on desktop (instead of the default search icon on the top right).
On mobile display, the custom field displays (our intention), yet the default search field also displays concurrently. I’ve not yet been able to figure out disable the default search icon (and subsequent display) on mobile, leaving the new custom search field visible.
To date, I’ve built the new search bar and styled it. There is also CSS , which I had hoped would disable the default search icon/bar. The search bar is also turned off in the theme editor.
Has anyone else had this issue?
/* === Custom Static Search Bar Styling === */
.custom-static-search-bar {
background-color: #000;
padding: 16px 20px;
display: flex;
justify-content: center;
}
.custom-static-search-bar .search-form {
display: flex;
align-items: center;
max-width: 700px;
width: 100%;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px; /* subtle bevel */
overflow: hidden;
}
.custom-static-search-bar .search-input {
flex-grow: 1;
padding: 12px 16px;
font-size: 16px;
border: none;
background-color: transparent;
color: #333;
}
.custom-static-search-bar .search-input::placeholder {
color: #666;
}
.custom-static-search-bar .search-button {
background: none;
border: none;
padding: 0 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.custom-static-search-bar .search-button svg {
width: 20px;
height: 20px;
fill: #000; /* Black search icon */
}
/* === Responsive: Scale down on mobile === */
@media screen and (max-width: 749px) {
.custom-static-search-bar {
padding: 12px 16px;
}
.custom-static-search-bar .search-form {
max-width: 100%;
}
.custom-static-search-bar .search-input {
font-size: 14px;
padding: 10px 12px;
}
.custom-static-search-bar .search-button svg {
width: 18px;
height: 18px;
}
}
/* === Optional: Hide custom static search bar on mobile ===
@media screen and (max-width: 749px) {
.custom-static-search-bar {
display: none !important;
}
}/
/ === Hide Prestige mobile search modal and icon === */
.search-modal,
.header__mobile-search {
display: none !important;
}
/* === Searchanise Widget Styles === */
#snize_search_widget {
display: flex;
justify-content: center;
width: 100%;
padding: 12px 0;
background-color: #000;
z-index: 5;
position: relative;
}
#snize_search_widget input {
max-width: 500px;
padding: 10px 16px;
border-radius: 6px;
font-size: 16px;
}
/* Kill Prestige’s default search on mobile only /
@media screen and (max-width: 749px) {
/ Buttons & icons that open the drawer/modal /
.header__icon–search,
.Header__Icon–search,
.Header__Wrapper [data-action=“open-search”],
.mobile-search__button,
.header__mobile-search,
.Header .Search,
.drawer–search,
.Drawer–search,
.search-modal,
.SearchDrawer,
.PredictiveSearch,
[href=“search”][class*=“Header__Icon”] {
display: none !important;
}
}