Foundation 5顶部栏菜单(带图标)分为两行

Question

我正在使用Foundation 5（最新版本，截至撰写本文时：v.5.3）

我已经设置了顶部栏菜单，每个元素都有一些图标。基本上：顶部栏菜单工作良好，除非页面宽度大于[640px]且小于[828px]！

我创建了一个屏幕截图来更好地说明这个问题：顶部条形菜单的屏幕截图

我准备了一个Fiddle来说明我的问题。(https://jsfiddle.net/sLk0jf4L/146/)

顶部条形HTML：

<div class="contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">My super homepage</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">
            <!-- Left Nav Section -->
            <ul class="left">
                <li class="active">
                    <a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span>&nbsp; Exclusive goods</a>
                </li>
                <li class="">
                    <a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span>&nbsp; New arrivals</a>
                </li>
                <li class="">
                <a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span>&nbsp; About</a>
                </li>
            </ul>
            <!-- Right Nav Section -->
            <ul class="right">
                <li class="has-dropdown">
                    <a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span>&nbsp;&nbsp; Choose language</a>
                    <ul class="dropdown">
                        <li><a href="#">Language 1</a></li>
                        <li class="active"><a href="#">Language 2</a></li>
                        <li><a href="#">Language 3</a></li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>
</div>

定位图标的附加CSS

span.menu-item
{
    font-size:1.25rem;
    font-weight:500;
    line-height:1.25rem;
}
a.link-item-new span.menu-item,
a.link-item-exclusive span.menu-item
{
    position:relative;
    top:0.1rem;
}
a.link-item-about span.menu-item
{
    position:relative;
    top:0.15rem;
}
a.link-item-flag span.menu-item
{
    position:relative;
    top:0.2rem;
}

我需要应用什么CSS规则来消除这种破坏？如果菜单上只显示汉堡包就好了图标，而不是制动。

感谢您的时间和知识。

Answer 1

我对您的html做了一个轻微的修改，在"Choose language"文本周围添加了一个span，类为.lang-text，这样我就可以使用@media查询来操作内容。

其想法是，当视口大小达到临界点时，只有"选择语言"文本被隐藏，保留标志图标（及其下拉选项）。

Html:

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My super homepage</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">
      <!-- Left Nav Section -->
      <ul class="left">
        <li class="active">
          <a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span>&nbsp; Exclusive goods</a>
        </li>
        <li class="">
          <a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span>&nbsp; New arrivals</a>
        </li>
        <li class="">
          <a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span>&nbsp; About</a>
        </li>
      </ul>
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="has-dropdown">
          <a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text">&nbsp;&nbsp; Choose language</span></a>
          <ul class="dropdown">
            <li><a href="#">Language 1</a></li>
            <li class="active"><a href="#">Language 2</a></li>
            <li><a href="#">Language 3</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>

@媒体查询：

@media only screen and (min-width: 40em) {
  a.link-item-flag span.lang-text {
    display: none;
  }
}
@media only screen and (min-width: 46.5em) {
  a.link-item-flag span.lang-text {
    display: inline-block;
  }
}

更新的Fiddle