BootstrapハンバーガーメニューをNavbarに垂直に配置するにはどうすればいいですか？

Question

私はブートストラップStudioで旅行サイトを構築しています - >http://stackoverflowquestion.bss.design/

は、1つの問題を除いて、これまでのところうまくいっています：私は縦ロゴに比例してハンバーガーメニューを揃える難しさを持っています。

私はcssに以下を追加しました見つかった問題対処する簡単な方法：

button.navbar-toggle.collapsed { 
    top:42px; 
} 

このアプローチの問題は、しかし、ということである：画面がにつれて、ロゴのサイズが変更

1. を小さいですが、バーガーメニューは同じ高さにとどまります
2. ユーザーがスクロールすると、ナビゲーションバー全体が縮小し、バーガーメニューが同じ高さに維持されます

@mediaのクエリを追加することができますが、膨大な数のクエリが追加されることがあります。バーガーメニューを常にロゴの中央に配置するより良い方法があるかどうかは疑問です？

Answer 1

flexboxを使用して、メニューを意図通りに整列させることができます。

は navbar-header要素にこれを追加します。

display: flex; 
align-items: center; 

Answer 2

それが絶対的に配置されている場合は、あなたがtransformを使用することができます。このよう

：

button.navbar-toggle.collapsed { 
    top:50%; 
    transform: translateY(-50%); 
} 

使用％は、それがダイナミックになります。これにより、最初の親の内側に、位置がrelativeまたはabsoluteの垂直方向に配置されます。