Debutテーマのメニューについて、
PC表示でもスマホ表示と同様にハンバーガーメニューを利用したいのですが、
可能でしょうか。
また、バッグアイコンをカートアイコンに変更したいのですが、
そちらもご教示いただければ幸いです。
宜しくお願い致します。
いずれも可能ですが、テーマファイルのコード編集が必要になります。
以下、手順をご説明します。
A. PCでのハンバーガーメニュー表示の手順
- オンラインストア→テーマ→コードを編集
編集するファイルは、theme.css.liquidです。
- メニューアイコンを常に表示させる
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; }
- ハンバーガーメニューを右側に寄せる。
二段階に分けて移動させます。
<ステップ１>
以下のコードを一部変更します。
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ファイル
ファイルの中身を次のリンク先のコードに置き換えます。
以上、ご参考ください。
宜しくお願いいたします。
2 Likes
わかりやすく教えていただき、誠にありがとうございます。
ヘッダーについては希望通りになったのですが、
フッターのレイアウトが崩れてしまいました。
修正方法はありますでしょうか。
宜しくお願い致します。
テーマデフォルト
ヘッダー調整後
申し訳ございません。他の箇所に影響が出てしまいましたね。
大変お手数ですが、以下のように修正いただけますでしょうか。
1 手順3、手順4、手順5のステップ2、を元の状態に戻してください。
（手順3：ハンバーガーメニューの中身をPCでも表示させる、手順4：通常のグローバルメニュー をPCで非表示にする、手順5＜ステップ2＞：.medium-up–one-quarterの変更）
- 以下のコードを、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%;
}
この手順でヘッダー以外の箇所への影響を無くせると思います。
一通り確認して問題なさそうでしたが、何か不具合があればお知らせください。
どうぞ宜しくお願いいたします。
3 Likes
誠にありがとうございます。
フッターについては問題なく修正できたのですが、
次は、ロゴが左揃えだと問題ないのですが、中央揃えにすると、メニューが表示されてしまう様になってしまいました。
度々申し訳ございませんが、
ご教示いただければ幸いでございます。
.theme.css.liquidファイルの一番下に次のコードを貼り付けてください。
#AccessibleNav{
display:none;}
これでグローバルメニューが消えると思います。
2 Likes
PC表示でロゴの下側の余白を大きくしたいというご要望でしたら、以下のコードで対応できると思います。
@media only screen and (min-width: 750px) {
.site-header{
padding-bottom:30px;
}}
貼り付け場所はtheme.css.liquidファイルです。
余白の大きさ「30px」を適宜調整ください。
2 Likes
この度は誠にありがとうございます。
大変お手数おかけ致しました。
無事望んでいる形にすることができました。
感謝申し上げます。
1 Like