FROM CACHE - jp_header

ヘッダーを固定したら上部が切れて表示されてしまう

Claclac
観光客
11 0 1

テーマはDawnです。
ヘッダーを固定して表示したかったので、コード編集からbase.cssにいき、下記のようにコードを編集しました。

.header-wrapper {
display: block;
width:100%;
position: fixed;
background-color: rgb(var(--color-background));
z-index: 999;
}

ヘッダーは固定されたのですが、上部の文字や画像が切れて表示されてしまいます。
positionをstickyに変更してみたりもしましたが、上手くいきませんでした。

解決する方法はありますでしょうか。ご教示よろしくお願い申し上げます。


  • CSS
1件の返信1

Qcoltd
Shopify Partner
1051 429 413

ご質問いただいている、ヘッダーにコンテンツが潜り込んでしまう件ですが、CSSの調整を行うことで調整が可能です。

下記CSSコードは十分な検証はできておりませんので、うまく動作しないことがあればお知らせください。

 

修正CSS

記載いただいているCSSと差し替えていただければと思います。

.header-wrapper {
  display: block;
  width:100%;
  position: fixed;
  background-color: rgb(var(--color-background));
  z-index: 900;
}
.content-for-layout {
  margin-top:81px;
}
.cart-notification-wrapper {
  z-index: 999;
}
@media screen and (min-width: 990px) {
  .content-for-layout {
    margin-top:101px;
  }
}

 

変更点解説

  • カートに商品を入れた際表示される表示エリアが潜り込んでしまうため、
    .header-wrapperのz-indexを900に変更
  • .content-for-layoutに『margin-top:81px;』を追加
    数値の81pxはスマホ時のヘッダーの高さに合わせ調整ください。
  • .cart-notification-wrapperに『z-index: 999;』を追加
    カートに商品を入れた際のポップアップ潜り込み回避用
  • @media screen and (min-width: 990px) 以下でPCサイズ時の調整
    .content-for-layoutに『margin-top:101px;』を追加
    数値の101pxはPC時のヘッダーの高さに合わせ調整ください。

ご参考まで。

(キュー小坂)

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