ヘッダーメニューをクリックした後、固定されたヘッダーメニューと遷移先ページが重なってしまう

Question

■ 現状

いわゆる高級ペライチと言われるサイトを現在作成しておりまして、ヘッダーメニューの項目をクリックすると、同ページ内のセクションページに遷移するように設定されてます。

■ 課題

クリック後はヘッダーメニューの下にセクションページが反映されるようにしたいのですが、固定されたクリック後に固定されたヘッダーメニューと遷移先セクションが重なってしまうという問題が発生しています。

■ 対策してみた事例

ヘッダーメニューのclassにposition:static、セクションのclassにposition:relativeを入れてみたり、セクションのclassにpadding-top:65px（ヘッダーメニューの高さ）と指定してみたりしたのですが、理想の形にはいかず。。。

どなたかご教授いただけますと幸いです。
宜しくお願いいたします。

Comments

[yng13]

>同ページ内のセクションページに遷移
ページ内のアンカーに遷移させる、ということでいいでしょうか？
それとも、メニューをクリックすると見た目上まるっと切り替わるとか？

[SuzukiToshiyasu]

お問い合わせありがとうございます！ページ内のアンカーに遷移させる認識で合っています！

Answer 1

ヘッダーメニューをfixedにした時のmarginの設定方法、という前提で回答します。

遷移先のセクションに

section {
  margin-top: -65px;
  padding-top: 65px;
}

等と記載すればアンカーをクリックした場合の調整はできそうです。

ただ、この方法だと「セクション1(つまり最初のセクション)」のメニューがクリックされた時の調整が必要ですね。

下記、参照ください。
http://codepen.io/anon/pen/KVmgXM

Comments

[SuzukiToshiyasu]

ありがとうございました！解決しました！！