Foundation 5 顶栏菜单（带图标）分成两行

Question

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

我已经为每个元素设置了一些图标的顶栏菜单。基本上：除非页面宽度，否则顶部栏菜单工作正常大于[640px]小于[828px]!

我创建了一个屏幕截图来更好地说明问题： screenshot of broken top-bar menu

我准备了一个 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，class 为 [=13] =] 这样我就可以使用 @media 查询来操作内容。

想法是，当视口大小达到极限时，只有 "Choose language" 文本被隐藏，保留旗帜图标（以及与之相关的下拉选项）。

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;
  }
}

Updated Fiddle

Foundation 5 顶栏菜单（带图标）分成两行

Foundation 5 top-bar menu (with icons) breaks in two lines

css

zurb-foundation-5