# Debutテーマのヘッダーメニューについて

**URL:** <https://community.shopify.com/t/debut/24319>\
**Category:** 技術的なQ＆A\
**Created:** [November 4, 2020, 7:45pm UTC](https://community.shopify.com/t/debut/24319 "2020-11-04T19:45:12Z")\
**Posts on this page:** 9\
**Page:** 1

## AI-generated summary

Debutテーマで、PC表示でもスマホ同様のハンバーガーメニューを使いたいことと、バッグアイコンをカートアイコンへ変更したいという相談です。

・回答では、theme.css.liquid のCSSを編集して、PCでもメニューアイコン表示・通常グローバルメニュー非表示・右寄せ配置を行う手順が提示されました。カートアイコン変更は snippets/icon-cart.liquid の差し替えで対応可能と案内されています。

・その後、初回のCSS変更でフッターのレイアウト崩れが発生。これを受けて、影響範囲をヘッダーのみに限定する修正版CSSが提示され、フッターの問題は解消されました。

・さらに、ロゴを中央揃えにするとPC用メニューが再表示される問題が出たため、#AccessibleNav を非表示にする追加CSSが案内されました。続いてロゴとアイコン位置のずれについても、ヘッダー下余白を調整するCSSが提案されています。

・画像は表示崩れの確認に重要でした。最終的に希望する形にできたとの報告があり、解決済みです。

<div class="post-metadata">

**Author:** ![Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://community.shopify.com/u/Anonymous_0089dd0756c157b269abdb5e44a63fb1)\
**Post date:** [November 4, 2020, 7:45pm UTC](https://community.shopify.com/t/debut/24319/1 "2020-11-04T19:45:12Z")

</div>

Debutテーマのメニューについて、

PC表示でもスマホ表示と同様にハンバーガーメニューを利用したいのですが、

可能でしょうか。

また、バッグアイコンをカートアイコンに変更したいのですが、

そちらもご教示いただければ幸いです。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![takeru-noda](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/takeru-noda/32/163722_2.png) [@takeru-noda](https://community.shopify.com/u/takeru-noda)\
**Post date:** [November 5, 2020, 1:53am UTC](https://community.shopify.com/t/debut/24319/2 "2020-11-05T01:53:10Z")

</div>

いずれも可能ですが、テーマファイルのコード編集が必要になります。

以下、手順をご説明します。

**A. PCでのハンバーガーメニュー表示の手順**

1. オンラインストア→テーマ→コードを編集

編集するファイルは、 **theme.css.liquid** です。

1. メニューアイコンを常に表示させる

3825行目あたりです。

**変更前**

```css
@media only screen and (max-width: 749px) {
  .site-header__icon {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 11px;
    margin: 0; } }

```

**変更後**

```css
.site-header__icon {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 11px;
    margin: 0; }

```

**3. ハンバーガーメニューの中身をPCでも表示させる**

以下のコードを削除します。

800行目あたりです。

```css
.medium-up--hide {
    display: none !important; }

```

**4. 通常のグローバルメニュー をPCで非表示にする**

以下のコードをファイルの一番下の位置に移動させます。

676行目あたりです。

```css
.small--hide {
    display: none !important; }

```

1. ハンバーガーメニューを右側に寄せる。

二段階に分けて移動させます。

**\<ステップ１\>**

以下のコードを一部変更します。

3733行目あたりです。

**変更前**

```css
@media only screen and (max-width: 749px) {
    .site-header__icons {
      width: auto;
      padding-right: 13px; }
      .site-header__icons .btn--link,
      .site-header __icons .site-header__ cart {
        font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em); } }

```

**変更後**

```css
.site-header__icons {
      width: auto;
      padding-right: 13px; }
      .site-header__icons .btn--link,
      .site-header __icons .site-header__ cart {
        font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em); }

```

**\<ステップ2\>**

さらに、次のコードを変更します。

700行目あたりです。

**変更前**

```css
.medium-up--one-quarter {
    width: 25%; }

```

**変更後**

```css
.medium-up--one-quarter {
    width: 100%; }

```

これで次の画像のようになると思います。

 ![Screen Shot 2020-11-05 at 10.44.24.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/2/c285b1e0c8f5debcf2a25fedb6a4d8cc3f4752af.jpeg)

**B. メニューのアイコンをショッピングカートに変える**

コードを編集する→Snippetsフォルダ→ **icon-cart.liquid** ファイル

ファイルの中身を次のリンク先のコードに置き換えます。

[https://community.shopify.com/c/Shopify-Design/How-can-I-change-my-cart-icon-on-the-Debut-theme/td-p/320366#M83620](https://community.shopify.com/c/Shopify-Design/How-can-I-change-my-cart-icon-on-the-Debut-theme/td-p/320366#M83620)

以上、ご参考ください。

宜しくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://community.shopify.com/u/Anonymous_0089dd0756c157b269abdb5e44a63fb1)\
**Post date:** [November 5, 2020, 6:57pm UTC](https://community.shopify.com/t/debut/24319/3 "2020-11-05T18:57:51Z")

</div>

わかりやすく教えていただき、誠にありがとうございます。

ヘッダーについては希望通りになったのですが、

フッターのレイアウトが崩れてしまいました。

修正方法はありますでしょうか。

宜しくお願い致します。

テーマデフォルト

 ![スクリーンショット 2020-11-06 030928.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/3/a3c2254fc860ae746dbf27c098e8b4d410c5af09.png)

ヘッダー調整後

 ![スクリーンショット 2020-11-06 031450.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/1/c/41c0640f941f3d020a19892ae53cd454331f2c00.png)

---

<div class="post-metadata">

**Author:** ![takeru-noda](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/takeru-noda/32/163722_2.png) [@takeru-noda](https://community.shopify.com/u/takeru-noda)\
**Post date:** [November 5, 2020, 11:12pm UTC](https://community.shopify.com/t/debut/24319/4 "2020-11-05T23:12:50Z")

</div>

申し訳ございません。他の箇所に影響が出てしまいましたね。

大変お手数ですが、以下のように修正いただけますでしょうか。

1 手順3、手順4、手順5のステップ2、を元の状態に戻してください。

（手順3：ハンバーガーメニューの中身をPCでも表示させる、手順4：通常のグローバルメニュー をPCで非表示にする、手順5＜ステップ2＞：.medium-up–one-quarterの変更）

1. 以下のコードを、theme.css.liquidファイルの一番下に貼り付けてください。

ヘッダーだけを変更するようにコードを設定しています。

```css
.grid__item.medium-up--one-half.small--hide{
display:none}

.mobile-nav-wrapper.medium-up--hide.critical-hidden.js-menu--is-open{
display:block!important;}

.grid __item.medium-up--one-quarter.text-right.site-header__ icons.site-header__icons--plus{
width:100%;
}

```

この手順でヘッダー以外の箇所への影響を無くせると思います。

一通り確認して問題なさそうでしたが、何か不具合があればお知らせください。

どうぞ宜しくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://community.shopify.com/u/Anonymous_0089dd0756c157b269abdb5e44a63fb1)\
**Post date:** [November 6, 2020, 8:02pm UTC](https://community.shopify.com/t/debut/24319/5 "2020-11-06T20:02:29Z")

</div>

誠にありがとうございます。

フッターについては問題なく修正できたのですが、

次は、ロゴが左揃えだと問題ないのですが、中央揃えにすると、メニューが表示されてしまう様になってしまいました。

度々申し訳ございませんが、

ご教示いただければ幸いでございます。

 ![スクリーンショット 2020-11-07 045613.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/6/96473e3e1932730409f8b99170e729e89d60cd9d.png)

---

<div class="post-metadata">

**Author:** ![takeru-noda](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/takeru-noda/32/163722_2.png) [@takeru-noda](https://community.shopify.com/u/takeru-noda)\
**Post date:** [November 6, 2020, 10:30pm UTC](https://community.shopify.com/t/debut/24319/6 "2020-11-06T22:30:06Z")

</div>

.theme.css.liquidファイルの一番下に次のコードを貼り付けてください。

```css
#AccessibleNav{
display:none;}

```

これでグローバルメニューが消えると思います。

---

<div class="post-metadata">

**Author:** ![Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://community.shopify.com/u/Anonymous_0089dd0756c157b269abdb5e44a63fb1)\
**Post date:** [November 9, 2020, 1:39am UTC](https://community.shopify.com/t/debut/24319/7 "2020-11-09T01:39:28Z")

</div>

ご回答誠にありがとうございます。

メニューは消えたのですが、

細かいところですが、ロゴとアイコンがヘッダー下部に移動してしまいました。

何度も申し訳ございません。

よろしくお願い致します。

 ![スクリーンショット 2020-11-09 102647.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/6/f678c4dd4191fddac88231e6e81f89e1c79a1f2b.png)

 ![スクリーンショット 2020-11-09 102713.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/7/c/b7cd7703692e06fb355960d138c151403cb320ef.png)

---

<div class="post-metadata">

**Author:** ![takeru-noda](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/takeru-noda/32/163722_2.png) [@takeru-noda](https://community.shopify.com/u/takeru-noda)\
**Post date:** [November 11, 2020, 10:48am UTC](https://community.shopify.com/t/debut/24319/8 "2020-11-11T10:48:54Z")

</div>

PC表示でロゴの下側の余白を大きくしたいというご要望でしたら、以下のコードで対応できると思います。

```css
@media only screen and (min-width: 750px) {
.site-header{
padding-bottom:30px;
}}

```

貼り付け場所はtheme.css.liquidファイルです。

余白の大きさ「30px」を適宜調整ください。

---

<div class="post-metadata">

**Author:** ![Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://avatars.discourse-cdn.com/v4/letter/a/f05b48/32.png) [@Anonymous\_0089dd0756c157b269abdb5e44a63fb1](https://community.shopify.com/u/Anonymous_0089dd0756c157b269abdb5e44a63fb1)\
**Post date:** [November 11, 2020, 2:10pm UTC](https://community.shopify.com/t/debut/24319/9 "2020-11-11T14:10:40Z")

</div>

この度は誠にありがとうございます。

大変お手数おかけ致しました。

無事望んでいる形にすることができました。

感謝申し上げます。