Menu icon Foundation
Toggle Menu dropdown stuck (I've tried methods posted here)

I am running F5 via sass. The topbar menu-icon shows up when the window is smaller, but when it is opened and the menu drops down, the icon goes away including the "Menu" text and I cant close it unless I select one of the links in the dropdown menu. I have searched this forums and tried the CSS methods posted and setting the width:auto;, to no avail.

bottom of the body:


app.scss:
@import "settings";
@import "foundation";
@import "custom";

 
     <div class = "sticky"> 
            <nav class = "top-bar" data-topbar>
              <ul class="title-area"> 
                <li class="name"> 
                    <h1><a href="#">title</a></h1>
                </li>
              </ul>
               <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
              <section class="top-bar-section">
                <ul class="right"> 
                    <li><a href="#">Music</a></li>
                    <li><a href=""#"">Photography</a></li>
                    <li class="has-dropdown"><a href="#">Contact</a>
                       <ul class="dropdown">
                        <li><a href=""#"">E-mail</a></li>
                        <li><a href="#" target="_blank">Facebook</a></li>
                       </ul>
                    </li>
                </ul>
              </section>
            </nav>
          </div>
            

         

Screen shot 2014 11 05 at 11.42.24 pm

Screen shot 2014 11 05 at 11.39.03 pm

dropdowntoggle menumenutogglestuckF5

I am running F5 via sass. The topbar menu-icon shows up when the window is smaller, but when it is opened and the menu drops down, the icon goes away including the "Menu" text and I cant close it unless I select one of the links in the dropdown menu. I have searched this forums and tried the CSS methods posted and setting the width:auto;, to no avail.

bottom of the body:


app.scss:
@import "settings";
@import "foundation";
@import "custom";

 
     <div class = "sticky"> 
            <nav class = "top-bar" data-topbar>
              <ul class="title-area"> 
                <li class="name"> 
                    <h1><a href="#">title</a></h1>
                </li>
              </ul>
               <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
              <section class="top-bar-section">
                <ul class="right"> 
                    <li><a href="#">Music</a></li>
                    <li><a href=""#"">Photography</a></li>
                    <li class="has-dropdown"><a href="#">Contact</a>
                       <ul class="dropdown">
                        <li><a href=""#"">E-mail</a></li>
                        <li><a href="#" target="_blank">Facebook</a></li>
                       </ul>
                    </li>
                </ul>
              </section>
            </nav>
          </div>
            

         

Screen shot 2014 11 05 at 11.42.24 pm

Screen shot 2014 11 05 at 11.39.03 pm