Hide the main menu on both devices for Dawn theme

Store Design

Topic summary

Goal: Hide the main menu on both desktop and mobile in the Shopify Dawn theme, and remove the header search icon.

  • The requester initially asked for CSS to hide the main menu on both devices (desktop + mobile).

  • Resolution for menu: They discovered it can be turned off directly in the theme editor (no custom code needed).

  • New issue: Remove the search (magnifying-glass) icon in the header; no toggle exists in the editor.

  • Solution provided: Add a CSS rule targeting the search icon’s class to hide it: .icon-search { display: none; }

  • Implementation detail: The rule was added in base.css and confirmed working by the requester.

Outcome: Main menu hidden via theme settings; search icon hidden via a small CSS addition. Status: Resolved; no open questions. (Notes: “base.css” is the theme’s stylesheet; “.icon-search” is the CSS class for the header search icon.)

Summarized with AI on February 13. AI used: gpt-5.
1

Hi guys - can anybody help with some css coding here? I need to hide the main menu on both devices for Dawn theme.

Many thanks!

Mladen

2

@Xydja which menu screenshot please and both devices do you mean desktop + mobile?

3

@Xydja You mean full bar ?

hamzasgd_0-1658524017312.png
hamzasgd_0-1658524017312.png624×188 4.29 KB

hamzasgd_1-1658524041957.png
hamzasgd_1-1658524041957.png1366×111 4.19 KB

4

Yea, both mobile and desktop but I got it - in this new theme all I had to do is switch off the menu in the theme editor. The other problem is how to loose the search option? For that there is no option in the editor. Any advice?

5

magnifying glass icon in the header

6

@Xydja

.icon-search {
    display: none;
}
7

Yup! Thats the one - had to go under base.css but it worked! Well done!