SuperToster

Так не пойдёт? https://jsfiddle.net/rbsj3u0h/

https://jsfiddle.net/7wjLch1v/

upd: или анимация слоя сверху нужна? https://jsfiddle.net/0ab3Lex6/
Сорь не разобрался в задаче )

Когда jsfiddle открываете, ждите несколько секунд, он косячит своими дурацкими оверлеями.

Добавить к body класс, и к нему привязать появление и анимацию меню, например так:
https://jsfiddle.net/Ganta/soepj68a/

a {
    text-decoration-skip-ink: none;
}

Bootstrap содержит много лишнего по причине своей универсальности, приспособленности "на любой случай".
После n-ого десятка проектов накопился свой багаж решений. База для форм, кнопок, галерей, комментариев и т. д. Все решения лаконичные, без лишнего мусора и благодаря этому легко масштабируются под новые проекты.
Сетка опять же своя. Была создана однажды и дополнялась/редактировалась от проекта к проекту пока не стала условно идеальной.

Где то указаны стили с большей важностью. Где - не видя всей таблицы увы подсказать не могу.

upd при каком разрешении экрана смотрите?

https://jsfiddle.net/ojew0aco/1/

По новой верстать в HTML не разрешили.

Послать в лес.

И главное, просят рассчитать ориентировочное время выполнения.

Справиться о ментальном здоровье и послать ещё дальше.

Проект > дизайн > вёрстка > программирование. Не наоборот.

box-sizing:border-box

https://jsfiddle.net/87bxf5v5/4/

Разве что запилить обратную трансформацию ) https://jsfiddle.net/8g1t8osg/

youpush.ru/demo.svg
Как сделал:
1. В графическом редакторе упростил цвета, выкрутил яркость чтобы убрать все полоски и прочее лишнее с картинки.
2. Открыл в Illustrator, трассировал, сохранил в SVG.
Дальше этот SVG можно использовать в HTML документе.

Речь об этом? https://jsfiddle.net/4yn093y6/

Можно и несколько попапов на одной странице. Обращаться к ним с помощью дата атрибута.

.popup {
  display:none
}

$(document).ready(function() {
  $(".js-popup-trigger").click(function() {
    $($(this).data("target")).css({
      "display": "block"
    });
  });
});

<button class="js-popup-trigger" data-target=".js-popup-one">call #1</button>
<button class="js-popup-trigger" data-target=".js-popup-two">call #2</button>
<button class="js-popup-trigger" data-target=".js-popup-three">call #3</button>

<div class="popup js-popup-one">popup #1</div>
<div class="popup js-popup-two">popup #2</div>
<div class="popup js-popup-three">popup #3</div>

Например с помощью jQuery плагина: leafo.net/sticky-kit/#examples

Подробно: https://habrahabr.ru/post/119139/

promo.hvalacloud.com/spiral.svg + @keyframes animation
Пример анимации https://jsfiddle.net/y6zfa4qL/

Слухи вас обманывают. Кроме того это задача, а не проблема : )
https://jsfiddle.net/a25z8uy6/1/
ещё вариант по просьбе ТС:
https://jsfiddle.net/9vdes60x/1/

Сорри, не внимательно вопрос прочитал : )
Исправил пример
UPD: https://jsfiddle.net/gdmn1vat/

Дизайнеры они такие : )
Подойдёт такой вариант? https://jsfiddle.net/86mbfLpt/1/

Будьте осторожней с подобными плагинами. В основной массе они сильно косячат на устройствах, обязательно нужно тщательно тестировать и в эмуляторах и на устройствах.
Из готовых решений прилично работает mmenu.frebsite.nl.