固定ナビゲーションのページナビリンクが上手く遷移しない!
ランディングページを制作する時、固定ナビゲーションをサイト上部に設置して、そこにページ内リンクを設置したのですが、思う様にページ遷移する事が出来ませんでした。
遷移自体はできるのですが、思った位置に遷移しません!
以下のような感じになってしまいます。
上記では、遷移先のタイトルに固定ナビゲーションが重なってしまっています。
本来なら、以下の様な位置に遷移をさせたいところです。
この修正方法をご紹介いたします。
修正方法といっても簡単で、cssをちょっと操作するだけです。
リンク先のCSSクラスに、以下の様に固定ページの高さ分のネガティブマージンを加えるだけ!
#link {
margin-top: -80px;
padding-top: 80px;
}
【80px】の部分は、設置した固定ページの高さに変更してください。
固定ナビの高さが50pxであれば、50pxに変更します。
これだけで固定ナビゲーションのページ内リンクが思った位置に遷移しない問題は解決です。
確認してくみてださい。
まとめ
固定ナビゲーションのページ内リンクのズレを解消する方法をご紹介しました。
今回の内容は以外と需要が有りそうな予感がします。
固定ナビゲーションを設置したときは他にも注意しなければならない点があります。
これらはまたの機会にご紹介できればと思います。
コメントを残す