Mesuti

В блоке css все что красное + скобки в конце очень сомнительные
https://jsfiddle.net/2qofw9mp/

htmlbook.ru/samhtml/yakorya

<a name="top">Блок</a>
<a href="#top">Ссылка на блок</a>

Ничего не понял, но очень интересно =)

Добавьте к скроллу высоту фиксированной шапки, и при прокрутке она не будет загораживать

С помощью JavaScript страница прокручивает первый блок на нужное количество пикселей.
Первый блок имеет меньший z-index, и второй наезжает на него.
Также футер имеет меньший z-index и при скролле открывается.

+ все оформлено простой анимацией появления при скроле на определенную высоту (с помощью JavaScript)
Например, отсюда можно взять https://daneden.github.io/animate.css/

Огромное количество ошибок.
В них есть ответ, почему нет иконок

Делается с помощью медиазапросов к ширине браузера.

@media (max-width: XXX) {
...
}

Верстаются оба меню, но на больших экранах мобильное скрыто, а на маленьких экранах наоборот

Есть пример кода?

Попробуйте

.gallery_group {
width: 100%
}