Can I remove the search bar on mobile and add it in the menu?

Store Design
, , , ,

Topic summary

A user wants to modify their Shopify Dawn theme’s mobile header by:

Goal:

  • Remove the magnifying glass search icon from the header bar (currently visible in top navigation)
  • Add a search bar inside the mobile menu instead

Current Status:

  • A solution was provided using CSS media queries to hide the header search icon on mobile devices (screens under 767px width)
  • The code targets .header__icons.header__search with display: none

Outstanding Question:

  • The original poster confirmed they want to hide the icon but specifically asked how to add a search bar within the menu itself
  • This second part (adding search to the menu) remains unanswered

The discussion is ongoing, as the CSS solution only addresses hiding the existing search icon, not implementing the menu-based search functionality requested.

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

Hello

I would like to know if it is possible to (only on mobile) delete the search bar (logo of a magnifying glass see the Red Circle Numero 1 on the photo below) in the menu bar (header). And put a search bar in the menu as we see below (circle number 2).

12.PNG
12.PNG561×859 31 KB

website : jadis-shop.com

password : rj

using dawn theme

Thanks in advance

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (max-width: 767px){
.header__icons .header__search {
    display: none;
}
}

ZestardTech_0-1678186516064.png
ZestardTech_0-1678186516064.png520×622 221 KB

3

Yes but i want to put a search bar in the menu as we see on the screenshot (circle number 2) please, it is possible ?