ナビゲーションメニュー(グローバルナビゲーション)を固定させたページはサイトを回遊しやすくていいですよね。
自分もやりたいと思うけどどうやったらいいのか…分からず苦戦しました。
今回は、そう言った悩みを解決する
Sticky Menu (or Anything!) on Scroll
というプラグインを紹介します。
※当サイトはxeorybaseをテーマに使用していますので、その前提で記事を書いてあります。
画像の赤枠で囲ってあるところをカスタマイズします。
では実際に設定してみましょう。
設定してみる
[ダッシュボード]→[設定]→[Sticky Menu (or Anything!) on Scroll]
もしくは
[プラグイン]→[インストール済みプラグイン]→[Sticky Menu (or Anything!) on Scroll]→[setting]
basic setting のタブを開きます。
①のところにxeorybaseのナビゲーションメニューのIDである #gnav と書き込みます。
②下にある青いボタンをクリック。設定を保存します。
それだけです!
あとがき
いかがでしたでしょうか。
記事を読み進めても、ぬるぬるっと上部のナビゲーションが追従してくれるようになりました。
これを設定すると
スマホからサイトを閲覧すると、固定させたナビゲーションが邪魔になって記事が全く読めなくなってしまいました。そこも設定をいじらないといけないかもしれません。
記事にしてみましたので、興味がありましたらこちらもご覧ください。
xeorybaseのスマホメニューをデフォルトで閉じておく方法
それでは。