Zurb Foundation topbar下拉列表在小屏幕上消失

Question

这很令人不安，因为我想要一个顶部栏的唯一原因是用于较小的屏幕。下拉列表适用于中型和大型，但在较小的屏幕上消失。我读过它需要在一个12宽的列中，但这似乎没有帮助。它实际上引入了另一个（小）问题，其中条不再填充屏幕的宽度。下拉列表只有4个字符，怎么可能太大？我在这里缺少什么？

<div class="row">
<div class="fixed small-12 medium-12 large-12 column">
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar="">
    <ul class="title-area">
    <li class="name"></li>
    </ul>
    <section class="top-bar-section">
    <ul class="left">
        <li class="has-dropdown">
        <a href="#">Menu</a>
        <ul class="dropdown">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
        </li>
    </ul>
    </section>
</nav>
</div>
</div>

大：

小：

Answer 1

它仍然需要一些调整，但我修复了它。我添加了

style="display: none;"

到

<ul class="title-area">

看起来他们都试图占据同一个空间。

Answer 2

  

我读过它需要在一个12宽的列中...

我真的不认为这是对的;这就是你引入问题的原因。

其实我会改变

<div class="fixed small-12 medium-12 large-12 column">

到

<div class="fixed">

如果只想显示小屏幕，那么你可以这样做

<div class="fixed show-for-small-only">

也不要忘记按照documentation重新初始化或重新应用听众（位于页面底部）。

$(document).foundation();

和

$(document).foundation('topbar', 'reflow');

另请注意，列表项应包含链接。变化

    <li>Test</li>
    <li>Test</li>
    <li>Test</li>

到

    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>

它不完全相同，但也许有帮助。我使用顶栏用于中型和大型屏幕，我使用tab-bar用于小屏幕。

你可以在website找到灵感。 随意检查。它也在GitHub上。

它基于Zurb-Foundation 5 documentation。我希望不应该难以应付。

Answer 3

还注意到您缺少移动菜单图标。

应该是标题区域中的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>