move search bar from header to sticky bar on mobile

Store Design

Topic summary

A user wants to relocate the search bar from the header to a sticky navigation bar on mobile, while removing the menu icon from the sticky bar and replacing it with the search functionality.

Current Situation:

  • Custom code was previously added by someone else to create the sticky bar
  • The original developer is no longer available for contact
  • The user lacks coding experience to make the changes themselves

Solutions Offered:

  • One responder suggests contacting the original developer or hiring someone with coding expertise
  • Another contributor provides detailed JavaScript code to accomplish the task, including:
    • Step-by-step instructions for accessing theme.liquid file
    • Code snippet that moves the search bar to the menu toolbar on screens ≤768px width
    • Logic to remove the account button from the sticky bar

Status: The discussion provides both a technical solution and practical advice, though implementation depends on the user’s ability to access their theme code or find developer assistance.

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

Would like to move the search bar from the header on my mobile site to the sticky bar and remove the menu from the sticky and replace it with the search.

IMG_3334.jpg
IMG_3334.jpg1284×2778 281 KB

2

I see that you’ve added custom code to create a sticky bar. You can copy the search code from the header, move it to your sticky bar replace it with the menu icon code.

3

I actually didnt someone did it for me and I cant get back in contact with them. Do you know the steps I need to do to do it?

4

If you don’t have experience coding, I recommend you contact them so they can change it for you.

5

Gotcha! As I mentioned early I am no longer in contact with them.

6

@Mrstep

you can add this js in your theme.liguid file

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find theme.liquid
footer area
inside script tag.

document.addEventListener('DOMContentLoaded', function() {
    const searchBar = document.querySelector('.header__search');
    const menuToolbar = document.querySelector('.menu_toolbar.d-flex.d-sm-none');
    const accountButton = document.querySelector('.btn_account');

    // Check if screen width is mobile size (<= 768px)
    if (window.innerWidth <= 768) {
        if (searchBar && menuToolbar) {
            menuToolbar.appendChild(searchBar); // Move the search bar to menu_toolbar
        }
        if (accountButton) {
            accountButton.remove(); // Remove the btn_account div
        }
    }
});

Hope this will solve your issues