Почему это происходит:
Когда вы нажимаете на ссылки, положение прокрутки устанавливается таким образом, чтобы связанный элемент (в вашем случае теги h1) размещался в самой верхней части страницы. Проблема и результирующее перекрытие связано с тем, что навигационная панель имеет атрибут position: fixed. Это отобразит его в верхней части страницы независимо от положения прокрутки.
Читайте об атрибуте позиции здесь:
https://www.w3schools.com/cssref/pr_class_position.asp
Что делать:
Быстрое решение состоит в том, чтобы увеличить отступ для элементов h1 с высотой панели навигации:
h1 {
padding-top:60px;
}
Результат этого:
https://jsfiddle.net/n4mez16b/30/
Как вы можете видеть, недостатком является то, что площадь между h1 и элементами перед ними увеличивается, что может быть нежелательно. Лучшее решение, которое может работать еще лучше, с использованием псевдоэлемента: before (измените значения поля / высоты в соответствии с вашими потребностями):
h1:before {
display: block;
content: "";
margin-top: -40px;
height: 40px;
visibility: hidden;
pointer-events: none;
}
Результат этого:
https://jsfiddle.net/n4mez16b/37/
Больше примеров / решений:
Надеюсь, вы найдете решение для вашей проблемы, удачи!
EDIT:
Чтобы ответить на другой вопрос, почему два последних элемента отображаются так, как вам нужно (сервис и контакт), скорее всего, это связано с высотой окна браузера. Так как вы дойдете до конца, окно не сможет прокрутить контент выше. :)