如何中心您的基金会导航栏/顶部酒吧

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>