SWELL PC表示の追従ヘッダーメニューを固定にするには？

お客様から以下のご要望がありました。

パソコンで表示した画面を下にスクロールして、ヘッダーメニューが一旦消えた後に、スッと再び現れる形になっています。これを完全に固定して表示するようにしたい。

カスタマイズ前の状態

① ヘッダーメニューの初期表示

② スクロースするとヘッダーメニューが消える

③ 上からスッとヘッダーメニューが現れる

パソコンで表示したときのヘッダーメニューを固定して、つねに表示したいという方もいらっしゃるのではないでしょうか。

この記事では、テーマSWELLを使用した場合に、パソコン表示のメニューが一旦消えることなく、つねに固定で表示する方法をご紹介します。

SWELL PC表示の追従ヘッダーを固定にするには？

行うことは、SWELLの設定とCSSの追加です。

1. SWELLの設定

ワードプレスの管理メニューから、以下のように移動して設定します。

①「外観」→ ②「カスタマイズ」→ ③「ヘッダー」→ ④「ヘッダーの追従設定」→ ⑤「ヘッダーを追従させる（PC）」のチェックを外して保存します。

2. CSSでカスタマイズ

①「外観」→ ②「テーマファイルエディター」→ ③「style.css」で以下のCSSを追加して保存します。

/* >>>>> PC ONLY */
@media (min-width: 960px) {

  /* >>>>> header menu setting */
  /* ヘッダーを固定 */
  .l-header {
    position: fixed;
  }
  /* メニューの下にメインビジュアル開始位置が重なるため上部位置を下げる */
  .p-mainVisual__inner {
      margin-top: 4em;
  }
  /* <<<<< header menu setting */

}
/* <<<<< PC ONLY */

3. 表示を確認

画面をスクロールしてみてください。ヘッダーメニューが固定で表示されるはずです。

もし専門家のサポートが必要だと感じたら、お気軽にご相談ください。