Как создать навигационную панель с внешним логотипом и 2 рядами разных цветов? - PullRequest
1 голос
/ 28 марта 2019

Как создать навигационную панель с 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...