Как сверстать данный элемент навигации?

Шохрух Шаймардонов, обалдеть, спасибо Вам огромное, буду очень благодарен.

С такими ребятами веришь в светлое будущее

Как сверстать данный элемент навигации?

Шохрух Шаймардонов, на самом деле очень классно)) но тогда из общей конвы вывалится такой FadeIn, заказчик хотел именно слайдер по навигации) С ней нереально сделать без JS, надо добавлять скрипты на состояния или не обязательно?

Как сверстать данный элемент навигации?

Ссылка на CodePen https://codepen.io/ivankalita_/pen/OYmRrp
z-index помог очень сильно, но спозиционировать до сих пор не могу понять как, чтобы было адаптивно
P.S. про анимацию вообще молчу))

Как сверстать данный элемент навигации?

Шохрух Шаймардонов, вот такая ситуация на данный момент: ::after элемент позиционируется после всех ссылок
Надеюсь, Вас не спугнет Bootstrap-Vue ))

<b-nav class="navigation" align="center">
                <b-nav-item>Personal</b-nav-item>
                <b-nav-item>Security</b-nav-item>
                <b-nav-item>API keys</b-nav-item>
                <b-nav-item>2FA</b-nav-item>
            </b-nav>

.navigation {
        /* display: inline-block; */
        background-color: #007bff;
        border-radius: 32px;
        width: 75%;
    }
    .navigation a {
        color: white;
    }
    .navigation::after {
        background-color: #E7E7E7;
        position: absolute;
        left: 50%;
        display: block;
        width: 150px;
        height: 4em;
        border-radius: 32px;
        content: "";
    }

Как сверстать данный элемент навигации?

Так, вроде мысль уловил, сейчас буду пробовать, спасибо, Вам, большое. С меня отчет обязательно, мб пригодиться))

Как сверстать данный элемент навигации?

Да, я согласен с вами, но проблема в том, что я не знаю как это даже сделать))) т.е. разметка HTML и стили CSS для элементов.
Да, можно обернуть ссылки тегом div, ему добавить border-radius & background-color, но вот как сделать ползунок серый, да чтобы его спозиционировать и заставить плавно перемещаться вдоль продольной оси симметрии вот не знаю)

Как подключить github к реальному проекту?

У нас просто при очередном коммите срабатывает хук в Gitlab, который дергает утилиту, которая засасывает файлы в Docker-образ. Этот образ запускается на тестовом сервере. Если проходят тесты успешно то образ запускается на боевом сервере, запросы роутятся на новый сервер, старый образ на боевом сервере отключается.

а можно поподробнее, очень интересно