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

日本語 ディスカッション 技術的なQ＆A
1

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

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

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

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

2

ご質問いただいている、ヘッダーにコンテンツが潜り込んでしまう件ですが、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時のヘッダーの高さに合わせ調整ください。

ご参考まで。

(キュー小坂)

1 Like