如何创建带有外部徽标和两行不同颜色的导航栏？

Question

如何创建具有两行（具有不同颜色）的导航栏，并在导航栏内设置徽标？ 链接到图像（应该如何）：https://i.imgur.com/iBwKZt6.png

我已经尝试过这些，但这不是我要搜索的内容： Bootstrap 4: Navbar with logo and 2 rows 要么 Bootstrap 4 navbar with 2 rows

因此，每行都有不同的颜色。否则，它看起来像是带有徽标的1色大面板。

如何正确设置？

A使用以下位置创建了此位置：绝对。我认为这不是一个好主意。 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;
}