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

日本語 ディスカッション 技術的なQ＆A
,
1

「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 -%}


2

質問拝見しました。

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

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

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

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

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

株式会社フルバランス

1 Like
3

無事に解決しました！

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

1 Like