Liquid、JavaScriptなどに関する質問
・使用テーマ: Prestige
・テーマのVer.:4.13.0
Prestigeをカスタマイズしたサイトで、PCでの表示のみヘッダー全体ではなくグローバルナビだけを固定にすることは可能でしょうか。
例えば、下記のデモサイトではヘッダー<header>全体ではなく、
<nav class="Header__MainNav ~"> のみをstickyにすることはできますでしょうか。
可能な場合、コードの書き方をご教示いただければ幸いです。
▼Prestige デモサイト
https://themes.shopify.com/themes/prestige/styles/couture/preview
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
有料のテーマであるため、
コード編集すべき具体的なファイル名やコード修正内容をお伝えするのが難しいので、
考え方だけお伝えいたします。
ヘッダーの構造は下記のようになっています。(下記のコード自体もだいぶ簡略化しています。)
<div id="shopify-section-header">
<header id="section-header">
<div>
<nav class="eader__MainNav"></nav>
</div>
<div></div>
<div></div>
</header>
</div>
質問者様のご要望ですと、
<nav class="eader__MainNav"></nav>をstickyにされたい、とのことですが、
<nav class="eader__MainNav"></nav>は、
<div id="shopify-section-header"></div>の中にあり、
この要素の中にある限りページ全体に対してstickyさせることはできませんので、
下記のような構造の変更が必要かと思います。
<div id="shopify-section-header">
<header id="section-header">
<div>
</div>
<div></div>
<div></div>
</header>
</div>
<nav class="eader__MainNav"></nav>
この状態にして、
<div id="shopify-section-header"></div>をstickyではなくし、
<nav class="eader__MainNav"></nav>をstickyにすれば、
ご希望の挙動を示すかと思います。
しかし、
この構造変更によって、
メニューに元々備わっているJavaScriptやCSSによる演出や処理がうまく機能しなくなる可能性がありますので、その調整を行う必要があるかもしれません。
場合によってはかなり大掛かりなコード変更になるかもしれません。
プライベートメッセージなどでやりとりさせていただいて、
コラボレーターアクセスをいただければ、
もう少し具体的な修正内容をお伝えできるかもしれませんが、
無料で協力できる範囲を超えているかもしれません。
ご自身でコード編集を行うのが難しい場合は、
相談できる制作会社を探されるのが良いかもしれません。
ご参考まで。
(キュー田辺)
成功
有料のテーマであるため、
コード編集すべき具体的なファイル名やコード修正内容をお伝えするのが難しいので、
考え方だけお伝えいたします。
ヘッダーの構造は下記のようになっています。(下記のコード自体もだいぶ簡略化しています。)
<div id="shopify-section-header">
<header id="section-header">
<div>
<nav class="eader__MainNav"></nav>
</div>
<div></div>
<div></div>
</header>
</div>
質問者様のご要望ですと、
<nav class="eader__MainNav"></nav>をstickyにされたい、とのことですが、
<nav class="eader__MainNav"></nav>は、
<div id="shopify-section-header"></div>の中にあり、
この要素の中にある限りページ全体に対してstickyさせることはできませんので、
下記のような構造の変更が必要かと思います。
<div id="shopify-section-header">
<header id="section-header">
<div>
</div>
<div></div>
<div></div>
</header>
</div>
<nav class="eader__MainNav"></nav>
この状態にして、
<div id="shopify-section-header"></div>をstickyではなくし、
<nav class="eader__MainNav"></nav>をstickyにすれば、
ご希望の挙動を示すかと思います。
しかし、
この構造変更によって、
メニューに元々備わっているJavaScriptやCSSによる演出や処理がうまく機能しなくなる可能性がありますので、その調整を行う必要があるかもしれません。
場合によってはかなり大掛かりなコード変更になるかもしれません。
プライベートメッセージなどでやりとりさせていただいて、
コラボレーターアクセスをいただければ、
もう少し具体的な修正内容をお伝えできるかもしれませんが、
無料で協力できる範囲を超えているかもしれません。
ご自身でコード編集を行うのが難しい場合は、
相談できる制作会社を探されるのが良いかもしれません。
ご参考まで。
(キュー田辺)
株式会社Q 田辺様 @Qcoltd
ご丁寧にご教示いただき、誠にありがとうございます。
やはりメニューだけをstickyにするには、コードをかなり変更しないと無理そうですね…。
クライアントと相談し、この動きはあきらめることにいたしました。
ご回答ありがとうございました。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024