Alfieros

https://jsfiddle.net/dpvLo0x4/

Пример
На счёт кнопок, смотрите z-index у элементов. А вопрос, кто это "мы"?
JS не будет блокировать кнопки и элементы.

Здесь от бутстрапа ничего нет. И это точно не навигация, а плашка со ссылкой. И делается это через border-bottom-left-radius и border-bottom-right-radius в свойствах CSS.

Вот тебе твоё уродство

Хацкер :D

Пример

Готовое решение

Так у вас не z-index вроде как играет роль. Ну или назначать ему 9999

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.left-block{
    width: 1200px;
    background:#464748;
    display:  flex;
    justify-content: center;
}

или

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

@keyframes animated {
0% { background-color: #fff0; }
50% { background-color: #ffffff7d; }
100% { background-color: #fff; }
}
И добавляешь класс animated нужному блоку.

Не влезает, потому что ты сломал структуру! Читай DOM ...

Вариантов масса. Один из самых простых способов, использовать свойство z-index и position: fixed/sticky. Учтите, что свойство sticky не поддерживается старыми браузерами, придётся использовать другие методы решения.

Ставь прелоадер на сайт, и не мучайся. Через JS можно отключить показ прелоадера если видео уже есть в кеше, чтобы при следующем заходе не показывать сам прелоадер. Было уже несколько подобных вопросов на тостере.

Тык

Напишите свой вариант решения и вас поправят/направят.