ヘッダー部分で固定で画像や文字を表示させたいときCSSで

.header{
position:fixed
top:0px;
}

を使うけど、 ワードプレスにログインした状態だと、アドミンバーが表示されるため、上記のようにtop:0px とすると fixed で設定した部分が隠れてしまいます。

ここで、対処方法ですが、アドミンバーがある場合、admin-bar クラスが追加されるので、下記のように記述します。

.header{
position:fixed
top:0px;
}
.admin-bar .header{
  top:35px;  
}
@media screen and (max-width: 782px) {
  .admin-bar .header{
    top:47px;  
  }
}


 
★★★★★★★★★★★★★★★★★
お仕事に関するご相談・お問い合わせは 株式会社オートプロジェクトのお問い合わせページよりお願いします。

運営サイト:
 IMCショップ
 オートプロジェクト

システム開発案内:
 株式会社オートプロジェクト