基金会顶栏移动菜单折叠

Question

我希望有一个左右一节的基础顶栏。 我得到的问题是，当它以小屏幕折叠时，我希望右侧导航（带有顶部栏的导航）仍然显示并且不会折叠到带有左侧导航部分的菜单中。

<nav class="top-bar" data-topbar role="navigation">
 <ul class="title-area">
  <li class="name">
   <h1><a href="#">My Site</a></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="active"><a href="#">Right Button Active</a></li>
    <li class="has-dropdown">
    <a href="#">Right Button Dropdown</a>
    <ul class="dropdown">
      <li><a href="#">First link in dropdown</a></li>
    </ul>
  </li>
 </ul>

 <!-- Left Nav Section -->
 <ul class="left">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
</section>
</nav>