Add a search button on mobile header - Brooklyn

Topic summary

Issue: In the Brooklyn theme, only the Cart icon appears in the mobile portrait header; the goal is to also show Search (as on desktop and mobile landscape).

Context and actions:

  • Store URL and theme ZIP were shared for review.
  • The original poster later found a workaround without external help.

Proposed solution (code edit):

  • In header.liquid, insert the translation key {{ ‘general.search.title’ | t }} immediately below the element with class site-nav–mobile text-right. This surfaces a Search option in the mobile portrait header.

Latest update and open question:

  • Another user applied the solution successfully but reports the Search appears on the left in an odd position. They ask if it can be positioned to the right next to the Cart icon.
  • No response yet on how to right-align or place it adjacent to Cart; alignment/positioning remains unresolved.

Notes:

  • Images were provided to illustrate header differences between portrait and landscape.
  • The key technical element is the Liquid translation string for “Search”; CSS/HTML positioning may require further customization.
Summarized with AI on January 13. AI used: gpt-5.

Hi there, I know this thread is old, but i used this solution and it worked, but the search is on the left in an odd spot, is it possible to be to the right next to the cart button,or is this not possible? thanks so much