# Dawnテーマストアでレスポンシブの場合検索アイコンを非表示にしてマイページへのログインアイコンを表示させたい

**URL:** <https://community.shopify.com/t/dawn/220121>\
**Category:** Shopify テーマ\
**Tags:** css\
**Created:** [May 30, 2023, 3:04am UTC](https://community.shopify.com/t/dawn/220121 "2023-05-30T03:04:36Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnテーマのヘッダーに関する要望：スマホ（レスポンシブ）表示時に検索アイコンを非表示にし、ログインアイコンをヘッダーに表示したい。PCでは「検索・ログイン・カート」を表示中。モバイルのデフォルトは「検索・カート」表示で、ログインはハンバーガーメニュー内（このログインは削除済み）。

制約・背景：CSSで3つのアイコン表示は可能だが、ロゴが中心からずれるため2つ表示に絞りたい（検索を消してログインを出す意図。アイコン選定に一部言及の揺れはあるが、最終的に2アイコン表示を希望）。

試行状況：コード編集を試みたが、編集箇所が不明で行き詰まり。

最新の動き：回答として、スマホ時に検索非表示・ログイン表示に関する過去回答へのリンク（community.shopify.com/topic/2045590）が共有された。

現状：本スレ内で具体的なコード提示はなく、解決は参照リンクに依存。結論は未確定で継続中。

<div class="post-metadata">

**Author:** ![yum1](https://avatars.discourse-cdn.com/v4/letter/y/74df32/32.png) [@yum1](https://community.shopify.com/u/yum1)\
**Post date:** [May 30, 2023, 3:04am UTC](https://community.shopify.com/t/dawn/220121/1 "2023-05-30T03:04:36Z")

</div>

初めまして。

Dawnのヘッダーにあるアイコンについての質問です。

PC版ではヘッダーに左から検索アイコン、ログインアイコン、カートアイコンで並べています。

レスポンシブで狭くなった際にはヘッダーにログインアイコンとカートアイコンを表示させたいと思っています。

レスポンシブの場合cssを変更して３つ表示することは可能ですが、その場合ストアのロゴが中心からずれてしまうので２つに絞ってカートアイコンは非表示にしたいです。現在はデフォルトでレスポンシブの場合は検索アイコンとカートアイコンが表示されており、ハンバーガーメニューの中にログインアイコンが表示されています。

なお、ハンバーガーメニューの内のログインアイコンの削除は実装済みです。

コード編集を試みていますが何処をどう変更すればよいかわからず、困っております。

お手数ですがアイコンを消す方法を教えていただけないでしょうか。宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 30, 2023, 9:53am UTC](https://community.shopify.com/t/dawn/220121/2 "2023-05-30T09:53:27Z")

</div>

ご質問いただいています、スマートフォンで閲覧した際「サーチアイコン」を非表示にし「ログインアイコン」を表示する件ですが、以前別の質問にて回答させていただきましたので、下記に対象記事を記載させていただきます。

[https://community.shopify.com/topic/2045590](https://community.shopify.com/topic/2045590)

ご参考まで。

(キュー小坂)
