【Bootstrap】ヘッダーを２段にしたい

Question

環境

haml、Bootstrap４

やりたいこと

ヘッダーを２段にしたい

%nav.navbar.navbar-header.navbar-expand-lg.fixed-top
  .col-12
    %a.navbar-brand.align-items-left{:href => "/"} 
      = image_tag("logo.png", width: '100%',alt: "logo")
    .text-rigth
      メールはこちら  

    #navbarSupportedContent.collapse.navbar-collapse
      %ul.navbar-nav.mx-auto
        %li.nav-item.active.justify-content-center.align-items-center
          %a.nav-link{:href => "#"}
            ナビ１
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ２
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ３
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ４
        %li.nav-item.justify-content-center
          %a.nav-link{:href => "#"} ナビ５

できたこと

ナビを５つ２段目に並べることができた

できないこと

メールが画像と同じ並び且つ右寄せ

調べたこと

flex-column　を navbar-collapseに入れてみて２段になりましたが、
ロゴの横にナビが来てしまった。

containerでヘッダーとナビを分けたが、ナビが右に寄ったため
text-centerにしたが変化がなかった。

ご教授よろしくお願いいたします。

Comments

[m.ts10806]

haml関係なく、静的HTMLで組むところからはじめてみては。

[roro_mochi]

Hamlでやることになってます。

Answer 1

.container
.row

そもそも上記の階層からできておりませんでしたので、直したところうまくいきました。

Answer 2

.mr-auto → .mx-auto
or frexコンテナ要素に.justify-content-center を付ける

Comments

[roro_mochi]

ありがとうございます。やってみましたがうまく行かず、ソースを更新しました。
よろしくお願いします。