如何中心您的基金會導航欄/頂部酒吧

Question

有很多關於這個問題的帖子要求一個答案，大多是半正確的或只是不工作。

您可以使用示例導航欄並添加將在下面的答案中的一些編輯。

Answer 1

只需從here複製並粘貼基礎頂部條示例即可。 在你的HTML將這個，

1. 刪除頂欄
2. 的左側或右側部分刪除左右從<ul class="left">' or '<ul class="right">
3. 刪除標題部分<h1><a href="#">Top Bar Title </a></h1>。

4. 在 @media only screen and (min-width: 58.75em) { 就在}結束標記之前添加

   .top-bar-section ul {display: table; margin: 0 auto;} 
   
   .top-bar-section ul li {display: table-cell;} 
   

。

這個現在應該離開你的三個鍵，如果你選擇了左側，它應該完全居中

Answer 2

這裏是最好的解決方案我發現，所有的調整事件的作品。它以基金會5頂級欄元素爲中心。

請注意'包含網格'div類將保持網站框架內的頂部欄導航的寬度，但實際上並不會實現導航元素的居中。

下面的代碼的確如此。

SCSS：

nav.top-bar:not(.expanded) { 
      text-align: center; 
      section.top-bar-section { display: inline-block; } 
          } 

HTML：

<div class="contain-to-grid"> 
    <nav class="top-bar" data-topbar> 
     <ul class="title-area"> 
      <li class="name"> 
       <h1><a href="#"></a></h1> 
      </li> 
      <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
      <ul> 
       <li><%= link_to 'LINK 1', root_path %></li> 
       <li class="divider"></li> 
       <li><%= link_to 'LINK2', link_path %></li> 
       <li class="divider"></li> 
       <li class="has-dropdown"> 
        <%= link_to 'Dropping', "#" %> 
        <ul class="dropdown"> 
         <li><label>Label:</label></li> 
         <li><%= link_to 'DROP 1', drop_path %></li> 
         <li class="divider"></li> 
         <li><%= link_to 'DROP 2', drop_path %></li> 
        </ul> 
       </li> 
      </ul> 
     </section> 
    </nav> 
</div>