css - Nav element from Foundation 4 does not display on iPhone

Question

I added a simple <nav class="top-bar"> element to my page. It's displaying properly on computers, but on the iPhone I just get a solid black bar with no menu items. This is the top part of my nav.

<nav class="top-bar" style="">
  <ul class="title-area">
    <li class="name"></li>
  </ul>

<section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown not-click"><a href="#">Orders</a>
        <ul class="dropdown"><li class="title back js-generated"><h5><a href="#">« Back</a></h5></li>
          <li class=""><a href="orders/new.php">Create New</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

Answer 1

Just remove the height in your CSS:

.top-bar .name {
    height: 45px;
}

Specifying a height was causing the <li> to render below <nav>, and since overflow:hidden was set, the <li> was not being displayed.