Сергей Горячев

height: 100vh, должно работать корректно

https://jsfiddle.net/pvfxnnyt/1/ - суть подхода
https://jsfiddle.net/v2s0z12v/ - моя реализация
Надеюсь, суть понятна.
Для шапки задаем градиентную заливку на 50%.
Меню картинкой будет и оно перекроет "стык".
Ну, или фон картинкой, как в макете.
Хотя я сделал бы просто цвет, там удобно.
Через absolute еще можно, но я не люблю его.

flexbox.help
Экспериментируйте.

код писать не буду, надеюсь понятно будет
хедер
- контайнер
контент
- контейнер
футер
- контейнер
и контейнер без айдишника, через класс

span {
display: block;
text-align: center;
}

Капец, как вы вообще работаете с Бутстрапом, если не знаете основ?
Да и вообще, нахрена браться за Фреймворк, если знаний по адаптиву ноль.

Смотрите в @media-запросах, где прописано это у вас.

Можно еще "путем опытов" поискать через консоль разработчика в браузере.
Весьма полезная штука для изучения.

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}

Много просите) И крутой плагин и легкий по весу)
По сабжу, я долго искал похожее, но в итоге использовал партикл.