Combine search bar with menu drop down on mobile view?

Store Design

Topic summary

A user wants to relocate the search bar on mobile view from the top-right corner into the hamburger menu dropdown, rather than just repositioning it elsewhere on the page.

Initial Solution Attempt:

  • A helper provided CSS code to move the search bar to the top-left, but this didn’t match the desired outcome.

Revised Approach:

  • The helper suggested adding a search icon directly inside the dropdown menu by modifying header.liquid or navigation.liquid files.
  • Provided code snippets to locate the dropdown menu structure (<ul class="dropdown-menu">) and insert search functionality.

Current Status:

  • The user couldn’t locate the specified dropdown menu code in their header.liquid file.
  • Multiple placement attempts failed to produce the desired result.
  • Confirmed they’re using the Dawn theme, which may require a different implementation approach.

The issue remains unresolved, pending theme-specific guidance for Dawn.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

GoombaGrows_0-1740114180684.png
GoombaGrows_0-1740114180684.png384×523 203 KB

Hello,

Am I able to remove the search from the top right of my mobile view and add it into the menu drop down instead?

Thanks in advance!

2

Link: https://qz26pn-cv.myshopify.com/

Password: bagono

3

Hi @GoombaGrows

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

Result:

topnewyork_0-1740120148455.png
topnewyork_0-1740120148455.png323×551 188 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

4

Hello,

Thanks for taking the time to help, however I don’t want to just move the search bar rather id like to add it into the drop down menu and keep the drop down menu where it is. The result I’m looking for is something like this.

GoombaGrows_0-1740122127212.png
GoombaGrows_0-1740122127212.png369×537 18.6 KB

Thanks again!

5

@GoombaGrows
Try this code
Go to Shopify Admin > Online Store > Themes > Edit Code

Open header.liquid or navigation.liquid

Find the dropdown menu code

Add this search icon inside the dropdown

-

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

6

Sadly I couldn’t find anything like

    in the header.liquid folder. I tried to add the code in a couple different places but couldn’t get it to work.

7

Which theme do you have?

8

Dawn theme