Shopify Supply Theme - アイテムをナビゲーションバーに垂直に配置するにはどうすればよいですか？

Question

は、だから私はすでに初期レイアウトからこれを変更したが、これは私のナビゲーションバーには、現在どのように見えるかです：

Nav Bar

をそして、これは私がしくじったコードです：

<nav class="nav-bar" role="navigation"> 
<div class="wrapper">  
    <div class="grid"> 
     <div class="grid-item large--one-half"> 
     {% include 'site-nav' %} 
     </div> 

     <div class="grid-item large--one-half text-right"> 
     <a href="/cart" class="header-cart-btn cart-toggle"> 
     <span class="icon icon-cart"></span> 
     {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span> 
     </a> 
     </div> 
    </div> 
</div> 
</nav> 

私の質問は：私はナビゲーションボタンとカートボタンのレベルをお互いにするために書くことができる別のボッチがあるのですか？私は時間のカップルのための周りにプレイを持っていたし、どこにでも持っていない:(事前に

おかげ

ラウラ:)

Answer 1

あなたの「グリッドのアイテムが大 - 半分」クラスによってグリッド項目が2つの半分に分割されています。たとえば、 "text-align：center"を追加する場合、メニューは親divの範囲に集中します。メニューdivをページの幅の100％にして、カートのリンクを絶対に配置する必要があります。リンクと同じ高さ作るという点で

.cart { 
position: absolute; 
top: 7px; 
right: 3%; 
line-height: 50px;} 

テキストは、その定義された高さの中央になるように、あなたはすべての行の高さを追加することができます。

私は、あなたのためにこれを参考にするための簡単なフィドルを作成しました。

https://jsfiddle.net/zsrjmLrd/