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

如何创建具有两行（不同颜色）的导航栏，并像这样在导航栏内设置徽标？ 链接到图像（应该是什么样子）：

我试过这些，但不是我想要的： 或

所以，每一行都有不同的颜色。否则，它看起来像一个带有徽标的彩色大面板

如何正确设置

A已创建此位置：绝对。我认为这不是个好主意。

HTML:

---

你为上述问题所做的尝试在某种程度上是可以的，但不专业，你必须将ul li项目向右对齐，因为现在它显示为左侧。关于这一点，它不是绝对定位的，但它确实依赖于顶部导航栏将ul li项目向右对齐对我来说不好。啊，在图像上，它与right@Mannaroth，非常感谢，但这不是引导：）您尝试的上述问题在某种程度上是可以的，但不专业，您必须将ul li项目向右对齐，因为现在它显示为左侧。这是怎么回事：，它不是绝对定位的，但是它确实算得上顶部导航栏与右对齐ul li项对我来说不好。啊，在图像上它与右对齐right@Mannaroth，非常感谢，但这不是引导：）

<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>

.logo-image {
    position: absolute;
    height: 90px;
    top: -2.2rem;
}