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

[バド]

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

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

可能でしょうか。

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

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

宜しくお願い致します。

[takeru-noda · Accepted solution]

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

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

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

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

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

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

.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%;
}

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

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

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

[takeru-noda · Accepted solution]

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

#AccessibleNav{
display:none;}

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

[takeru-noda]

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

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

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

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

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

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

3825行目あたりです。

変更前

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

変更後

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

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

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

800行目あたりです。

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

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

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

676行目あたりです。 

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

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

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

<ステップ１>

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

3733行目あたりです。

変更前

@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); } }

変更後

    .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行目あたりです。

変更前

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

変更後

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

  

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

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...

以上、ご参考ください。

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

[バド]

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

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

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

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

宜しくお願い致します。

テーマデフォルト

ヘッダー調整後

[takeru-noda · Accepted solution]

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

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

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

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

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

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

.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%;
}

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

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

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

[バド]

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

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

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

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

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

[takeru-noda · Accepted solution]

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

#AccessibleNav{
display:none;}

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

[バド]

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

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

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

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

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

[takeru-noda · Accepted solution]

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

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

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

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

[バド]

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

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

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

感謝申し上げます。