iBird Rose

Как затемнить картинку и наложить еще одну поверх нее?

height: 100vh; ?

ну тк ограничивай высоту у дропдауна и задай ему overflow-y: auto;

.parent {
  >div {width: 200px;}
}

с регулярками было бы проще. а так к примеру так:
https://jsfiddle.net/tzx5zb1w/2/

хак для ie
stackoverflow.com/questions/8004765/css-9-in-width...

https://jsfiddle.net/7ch3wz12/1/

https://getuikit.com/

плагин Single Page Nav Plugin убирает переходы.
вот тут есть опция filter https://github.com/ChrisWojcik/single-page-nav#options
вам она нужна
задайте класс для ссылок .external

<li class="nav-item"><a class="nav-link external" href="">Вконтакте</a></li>
<li class="nav-item"><a class="nav-link external" href="">Одноклассники</a></li>
<li class="nav-item"><a class="nav-link external" href="">НАПСАТЬ НАМ</a></li>

задай ему line-height большой

https://jsfiddle.net/aack5roj/

разделяешь сначала 8 на 4
а уже в нем делаешь свои контентные
https://jsfiddle.net/hqvo9nzy/

раз шапка прям разная - не легче сделать 3 блока шапки. задать двум display:none; а одной block; и в зависимости от класса в body скрывать 2 других и показывать нужный?

потому что после 1200px идет масштабирование, а не адаптирование. ты блоку задал фиксированную ширину в 1200px - он выходит за грани документа. в инспекторе посмотри где у тебя body заканчивается.
в двух словах - блок просто вышел за грани сайта. потому что ему некуда деваться.

p.s. если хочешь чтобы он дальше масштабировался нормально задай для body
body {min-width: 1200px;}

transition на градиент не работает
p.s. как вариант можешь сделать фон отдельным блоком. а текст - другим. и вешать opacity. и уже на opacity делать transition