基金会导航栏表现得很奇怪

Question

我使用基础6来构建我的网站。当我缩小窗口大小时，只会出现问题。

我的网站图片

有人知道如何解决这个问题吗？ 感谢答案。

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#"><b>Pimg</b>
        </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">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="home.php">   <div class="entypo-home entipo"></div></a></li>
      <li><a href="photos.php"> <div class="entypo-picture entipo"></div></a></li>
      <li><a href="upload.php">   <div class="entypo-upload entipo"></div></a></li>
      <li><a href="memberpage.php">    <div class="entypo-user entipo"></div></a></li>
    </ul>
    <ul class="left">
      <li><a href="logout.php">Log out</a></li>
      <li class="has-form">
        <div class="row collapse">
          <div class="medium-8 columns">
            <input type="text" placeholder="Search...">
          </div>
          <div class="medium-4 columns">
            <a href="#" class="alert button expand">Search </a>
          </div>
        </div>
      </li>
    </ul>
  </section>
</nav>