Foundation 5 - top bar menu icon not visible

Question

I'm working on a site using the latest version of Foundation 5 SASS (downloaded a few days ago from https://github.com/zurb/bower-foundation). When I create a top bar the menu-icon (the 3 horizontal lines) doesn't appear on mobile/small screens. It's just the 'MENU' text.

Here is my code:

<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<ul class="left">
<li><a href="/">HOME</a></li>
<li class="has-dropdown">
<a href="#">ROOMS &amp; FACILITIES</a>
<ul class="dropdown">
<li><a href="#">FIRST</a></li>
<li><a href="#">SECOND</a></li>
<li><a href="#">THIRD</a></li>
</ul>
</li>
<li><a href="/">PRICES</a></li>
<li><a href="/">THINGS TO DO</a></li>
<li><a href="/">CONTACT</a></li>
</ul>

<ul class="right">
<li class="show-for-medium-up"><a href="http://foundation.zurb.com/docs" class="top-bar-availability"><i class="fi-calendar calendar-icon"></i> CHECK AVAILABILITY</a></li>
</ul>
</section>
</nav>
</div>

Any help greatly appreciated. I've had a good look around already and can't find a solution. Most of the problems seemed to be from people omitting the span tags around the Menu text.

Thanks

Answer 1

the main thing is to have a <span> element. In the case of 2 examples below, the first one will NOT show the hamburger icon, but the second and the third one will.

<li class="toggle-topbar menu-icon "><a href="#">Menu</a></li>
<li class="toggle-topbar menu-icon "><a href="#"><span>Menu</span></a></li>
<li class="toggle-topbar menu-icon "><a href="#"><span></span></a></li>

Answer 2

<li class="toggle-topbar menu-icon">
    <a href="#"><span>MENU</span></a>
</li>

This works fine with latest (5.5.3) version