Zurb Foundation topbar dropdown disappears on small screens

Question

This is troubling because the only reason I want a topbar is for smaller screens. The dropdown works fine in medium and large, but disappears on smaller screens. I've read it needs to be inside a 12-width column, but that doesn't seem to help. It actually introducted another (minor) problem where the bar no longer fills the screen's width. The dropdown is only 4 characters, how could it be too large? What am I missing here?

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

large:

small:

Answer 1

It still needs some tweaking, but I fixed it. I added

style="display: none;"

to

<ul class="title-area">

It looks like they were both trying to occupy the same space.

Answer 2

I've read it needs to be inside a 12-width column...

I really don't think that this is right; that is the reason for the problem you introduced.

Actually I would change

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

to

<div class="fixed">

If want it to show for small screens only then you could do like this

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

Also don't forget to reinitialize or reapply listeners as per documentation (at the very bottom of the page).

$(document).foundation();

and

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

Also note the list items should contain links. Change

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

to

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

---

It's not exactly the same, but maybe helpful. I use top-bar for medium and larger screens, and I use tab-bar for small screens.

You can find inspiration on my website. Feel free to inspect it. It's also on GitHub.

It is based on the Zurb-Foundation 5 documentation. Shouldn't be too difficult to cope with I hope.

Answer 3

Also noticed you are missing the mobile menu icon.

Should be an li in the title-area

     <!-- 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>