FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

グローバルナビだけを固定にしたい [テーマ:Prestige]

解決済

グローバルナビだけを固定にしたい [テーマ:Prestige]

kuma17
Shopify Partner
4 0 0

・使用テーマ: Prestige

・テーマのVer.:4.13.0

 

Prestigeをカスタマイズしたサイトで、PCでの表示のみヘッダー全体ではなくグローバルナビだけを固定にすることは可能でしょうか。

 

例えば、下記のデモサイトではヘッダー<header>全体ではなく、

<nav class="Header__MainNav ~"> のみをstickyにすることはできますでしょうか。

 

可能な場合、コードの書き方をご教示いただければ幸いです。

 

▼Prestige デモサイト

https://themes.shopify.com/themes/prestige/styles/couture/preview

 

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

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1128 457 449

成功

有料のテーマであるため、

コード編集すべき具体的なファイル名やコード修正内容をお伝えするのが難しいので、

考え方だけお伝えいたします。

 

ヘッダーの構造は下記のようになっています。(下記のコード自体もだいぶ簡略化しています。)

<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 (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1128 457 449

成功

有料のテーマであるため、

コード編集すべき具体的なファイル名やコード修正内容をお伝えするのが難しいので、

考え方だけお伝えいたします。

 

ヘッダーの構造は下記のようになっています。(下記のコード自体もだいぶ簡略化しています。)

<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 (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
kuma17
Shopify Partner
4 0 0

株式会社Q 田辺様 @Qcoltd 

 

ご丁寧にご教示いただき、誠にありがとうございます。

やはりメニューだけをstickyにするには、コードをかなり変更しないと無理そうですね…。

 

クライアントと相談し、この動きはあきらめることにいたしました。

ご回答ありがとうございました。