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

解決済
Highlighted
観光客
5 0 1

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

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

可能でしょうか。

 

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

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

宜しくお願い致します。

0 件の「いいね!」
Highlighted

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

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

 

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. ハンバーガーメニューを右側に寄せる。

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

<ステップ1>

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

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

  

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

Screen Shot 2020-11-05 at 10.44.24.png

 

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

 

以上、ご参考ください。

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

Highlighted
観光客
5 0 1

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

 

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

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

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

 

宜しくお願い致します。

 

テーマデフォルト

スクリーンショット 2020-11-06 030928.png

 

ヘッダー調整後

スクリーンショット 2020-11-06 031450.png

0 件の「いいね!」
Highlighted

成功

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

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

 

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

 

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

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

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

Highlighted
観光客
5 0 1

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

 

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

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

 

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

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

 

スクリーンショット 2020-11-07 045613.png

0 件の「いいね!」
Highlighted

成功

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

#AccessibleNav{
display:none;}

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

Highlighted
観光客
5 0 1

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

 

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

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

 

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

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

 

スクリーンショット 2020-11-09 102647.png

 

 

スクリーンショット 2020-11-09 102713.png

0 件の「いいね!」
Highlighted

成功

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

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

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

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

 

Highlighted
観光客
5 0 1

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

 

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

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

感謝申し上げます。