Фонд TopBar: Должность Название в Центре

Question

Я использую Foundation's top-bar, и я хочу разместить заголовок «Дом» в центре верхней панели, сохраняя мое «Меню» в конце правой части. Однако, что я получаю от своего кода, мой «Дом» все еще остается в левой части, а мое «Меню» находится справа.

Я понял, что если я выберу title-area (имеет поплавок: влево), то он будет центрировать мой «Дом», но он подталкивает мое «меню» под верхнюю панель, но он по-прежнему остается в правой части, .

Кто-нибудь знает, как расположить заголовок посередине, сохраняя меню справа в верхней панели?

Спасибо!

<nav class="top-bar" data-topbar role="navigation"> 
    <ul class="title-area"> 
     <li class="name"> 
      <h1 id="top_bar_page_title">Home</h1> 
     </li> 
     <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li> 
    </ul> 
    <section class="top-bar-section"> 
    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="has-dropdown"> 
      <a href="#">Menu</a> 
      <ul class="dropdown"> 
      <li><a href="#">First link in dropdown</a></li> 
      <li class="active"><a href="#">Active link in dropdown</a></li> 
      </ul> 
     </li> 
     </ul> 
     </section> 
    </nav> 

#top_bar_page_title{ 
    color: $white; 
    text-align: center; 
} 

Answer 1

Добавьте в существующий код следующее правило CSS. Установка ширины и поля: 0 авто поможет меню найти центр.

@media (min-width: 640px) { 
    .top-bar .title-area { 
    float: left; 
    margin: 0 auto; 
    width: calc(100% - 90px); 
    position: unset; 
    } 
} 

Codeply Demo

Если вы не хотите известково(), используйте ширину 85%.

Answer 2

ЕСЛИ вы хотите, чтобы меню оставалось справа. Просто укажите ширину, как

.title-area { 
    float: left; 
    width: 80%; 
} 

nav { 
    background: #ff0000 none repeat scroll 0 0; 
} 

Если у вас есть какие-либо разъяснения. Можете ли вы предоставить URL-адрес, чтобы я мог очистить вас больше?