Javascript Bootstrap4：将一些内容放在导航图标的顶部

我希望我的代码如下所示：

我已完成导航栏图标的创建，并已放置了徽标，但无法将数据放在导航图标的顶部：

我的代码：

 <nav class="navbar navbar-light bg-dark">
     <a class="navbar-brand text-light" href="#">
      <img src="logo.png" width="30" height="30" alt="">
      My Photos
      </a>
      <div class="row">
        <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-dark p-4">
            <h3 class="text-white h3 ">Contact</h3>
                <span class="text-white">Follow on Twitter</span>
                    <p class="text-white">Like on Facebook</p>
                    <p class="text-white">Email me</p>
                   </div>
                  </div>
                </div>
          <nav class="navbar navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarToggleExternalContent" aria- 
  controls="navbarToggleExternalContent" aria-expanded="false" aria- 
  label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

        </nav>

联系
关注推特
喜欢在Facebook上
给我发电子邮件

您想要的导航上方的元素不应该是导航的一部分，您可以轻松获得您想要的内容

正在处理下面的片段：

.myNav{
背景：343a40；
颜色：#fff；
填充：0 16px；
}

关于
一本精美图片的相册，尽情享受吧

联系
关注推特

比如在Facebook上
给我发电子邮件