Search Bar Stay Expanded Under Header - TRADE Theme

Shopify Discussion

Topic summary

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:

  • Modify the header-search.liquid file to locate the “header__search” code
  • Add custom CSS to base.css to:
    • Hide the modal overlay and close button
    • Keep the search bar expanded with proper spacing
    • Optionally hide the search icon
    • Adjust mega-menu positioning
    • Ensure the logo displays correctly with z-index adjustments

Implementation Issues:

Another user (cmcmahon211) encountered problems when attempting the fix:

  • The word “Details” with an arrow appeared unexpectedly
  • Header elements became unclickable
  • They removed the code and requested clarification

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.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
7 
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

1 Like