# モバイルでのヘッダーアイコン表示について

**URL:** <https://community.shopify.com/t/topic/292127>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [February 3, 2024, 2:26pm UTC](https://community.shopify.com/t/topic/292127 "2024-02-03T14:26:04Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

**問題の内容:**
Shopifyの「Prestage」テーマで、タブレット・PCではヘッダー右側にアカウントとカートのアイコンが表示されるが、モバイルではカートアイコンのみ表示される。モバイルでもアカウントアイコンを表示させたい。

**原因:**
メディアクエリによって、一定以下の画面幅でアカウントアイコンが非表示になる設定になっている。コード内の `sm-max:hidden` や `md:hidden` などのクラスが原因。

**解決方法:**
header.liquidファイルまたは適用するCSSファイルに以下のコードを追加:

```css
@media (max-width: [スマホサイズのpx値]) {
  .header__nav-icon {
    display: block !important;
  }
}
```

**結果:**
質問者は無事に解決した。

<div class="post-metadata">

**Author:** ![sana\_marblanc](https://avatars.discourse-cdn.com/v4/letter/s/a9a28c/32.png) [@sana\_marblanc](https://community.shopify.com/u/sana_marblanc)\
**Post date:** [February 3, 2024, 2:26pm UTC](https://community.shopify.com/t/topic/292127/1 "2024-02-03T14:26:04Z")

</div>

「prestage」のテーマで制作しています。

現在、タブレットとPCではヘッダーの右側にアカウントとカートのアイコンが表示されていますが、モバイルではカートアイコンのみの仕様になっています。

モバイルでも、同様にアカウントアイコンを表示させたいのですが、どなたかご教授いただけますでしょうか。

▽アカウントアイコンのコード

{%- if shop.customer\_accounts\_enabled -%}  
  
 {{ ‘header.general.open\_account’ | t }}

 

{%- if section.settings.show\_icons -%}  
{%- render ‘icon’ with ‘account’, class: ‘header\_\_nav-icon’ -%}  
{%- else -%}  
{%- render ‘icon’ with ‘account’, class: ‘header\_\_nav-icon’ -%}

 {%- if customer -%} {{- 'header.general.account' | t -}} {%- else -%} {{- 'header.general.login' | t -}} {%- endif -%} {%- endif -%} {%- endif -%}

▽カートアイコンのコード

\<a href=“{{ routes.cart\_url }}” class=“relative” {% if settings.cart\_type != ‘page’ and request.page\_type != ‘cart’ %}aria-controls=“cart-drawer”{% endif %}\>  
{{ ‘header.general.open\_cart’ | t }}

{%- if section.settings.show\_icons -%}  
{%- render ‘icon’ with ‘cart’, class: ‘header\_\_nav-icon’ -%}  
{%- else -%}  
{%- render ‘icon’ with ‘cart’, class: ‘header\_\_nav-icon’ -%}  
{{ ‘header.general.cart’ | t }} ({{ cart.item\_count }})  
{%- endif -%}

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [February 15, 2024, 9:15am UTC](https://community.shopify.com/t/topic/292127/2 "2024-02-15T09:15:20Z")

</div>

質問拝見しました。

メディアクエリでアイコンが一定以下の画面幅の時に表示されな設定となっているのかと思います。

なので以下コードをheader.liquidファイルや適用するcssファイルに追加を検討してみてください。

```markup
@media (max-width: (スマホサイズに切り替わる)px) {
.header__nav-icon {
display: block !important;
}
}

```

header\_\_nav-iconは例になりますので実際のアイコンのクラス名を入れてください。

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![sana\_marblanc](https://avatars.discourse-cdn.com/v4/letter/s/a9a28c/32.png) [@sana\_marblanc](https://community.shopify.com/u/sana_marblanc)\
**Post date:** [February 15, 2024, 11:56am UTC](https://community.shopify.com/t/topic/292127/3 "2024-02-15T11:56:45Z")

</div>

無事に解決しました！

ご丁寧にご説明いただきありがとうございました。