details[open] .modal-overlay, .modal__close-button .icon {
display: none !important;
}
details[open]>.search-modal, #MainContent {
margin-top: 54px !important;
}
Add this code to last line file base.css
A user wants to keep the search bar permanently expanded below the header in their Shopify TRADE theme, rather than requiring users to click a search icon.
Solution Provided:
BSS-TekLabs offered a multi-step CSS solution:
header-search.liquid file to locate the “header__search” codebase.css to:
Implementation Issues:
Another user (cmcmahon211) encountered problems when attempting the fix:
A third contributor (wellwisher) provided a consolidated CSS snippet combining all necessary code to hide the close button and search icon while maintaining functionality.
Status: The original poster confirmed success, but implementation challenges remain for other users attempting the same modification.
details[open] .modal-overlay, .modal__close-button .icon {
display: none !important;
}
details[open]>.search-modal, #MainContent {
margin-top: 54px !important;
}
Add this code to last line file base.css