Как создать навигационную панель с 2 рядами (с разными цветами) и установить логотип внутри навигационной панели следующим образом? Ссылка на изображение (как и должно быть): https://i.imgur.com/iBwKZt6.png
Я пробовал это, но это не то, что я ищу: Bootstrap 4: Navbar с логотипом и 2 рядами или же Bootstrap 4 navbar с 2 рядами
Итак, каждая строка имеет разные цвета. В остальном это выглядит как одноцветная большая панель с логотипом.
Как правильно установить?
A создали это с позицией: absolute. Я думаю, что это не очень хорошая идея. https://codepen.io/AntonFix/pen/moozJQ
HTML:
<div class="row bg-custom2"> <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-md-6 offset-md-4 float-right my-3"> Call us! | WhatsApp | E-mail </div> </div> </div> </div> </div> <nav class="navbar navbar-expand-md navbar-light bg-custom navbar-logo"> <a href="#" class="navbar-brand"> <img class="logo-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/320px-Test-Logo.svg.png" alt="Logo"> </a> </nav>
CSS:
.logo-image { position: absolute; height: 90px; top: -2.2rem; }