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.
2

Hello @svandervort .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.