Menu icon Foundation
Responsive Nav Not Working

What I want the code to accomplish is a dropdown menu window on small screens with just 'Home' and 'About' stacked on top of each other. Instead what I am getting is just a smaller version of the medium-up nav bar when the Menu icon is pressed. 

In other words I get the small nav menu icon with the word 'Menu' in a black bar on small screens (which is good). However, when the menu button gets toggled, instead of getting a small screen specific dropdown menu, a scrunched together version of the bigger screen nav bar shows up. 

 

Here is my code: 

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">

         <button class="menu-icon" type="button" data-toggle></button>

         <div class="title-bar-title">Menu</div>

</div>

<div class="top-bar" id="main-menu">

            <div class="top-bar-left">

                <ul class="menu">

                    <li class="menu-text"><span>Giving</span>Site <span id="title-tag">cuz giving feelz good.</span></li>

                </ul>

           </div>

           <div class="top-bar-left">

                <ul class="dropdown menu nav-links" data-dropdown-menu>

                    <li><a href="index.html">Home</a></li>

                    <li><a href="about.html">About</a></li>

                </ul>

            </div>

            <div class="top-bar-right hide-for-small-only">

                <div class="large-12  columns">

                    <ul class="inline-list center">

                        <form>

                            <div class="row collapse">

                                <div class="small-12 columns">

                                    <input type="text" class="dream-search" placeholder="Search">

                                </div>

                            </div>

                        </form>    

                    </ul>

                </div>

            </div>            

        </div>

responsive menutop bar

What I want the code to accomplish is a dropdown menu window on small screens with just 'Home' and 'About' stacked on top of each other. Instead what I am getting is just a smaller version of the medium-up nav bar when the Menu icon is pressed. 

In other words I get the small nav menu icon with the word 'Menu' in a black bar on small screens (which is good). However, when the menu button gets toggled, instead of getting a small screen specific dropdown menu, a scrunched together version of the bigger screen nav bar shows up. 

 

Here is my code: 

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">

         <button class="menu-icon" type="button" data-toggle></button>

         <div class="title-bar-title">Menu</div>

</div>

<div class="top-bar" id="main-menu">

            <div class="top-bar-left">

                <ul class="menu">

                    <li class="menu-text"><span>Giving</span>Site <span id="title-tag">cuz giving feelz good.</span></li>

                </ul>

           </div>

           <div class="top-bar-left">

                <ul class="dropdown menu nav-links" data-dropdown-menu>

                    <li><a href="index.html">Home</a></li>

                    <li><a href="about.html">About</a></li>

                </ul>

            </div>

            <div class="top-bar-right hide-for-small-only">

                <div class="large-12  columns">

                    <ul class="inline-list center">

                        <form>

                            <div class="row collapse">

                                <div class="small-12 columns">

                                    <input type="text" class="dream-search" placeholder="Search">

                                </div>

                            </div>

                        </form>    

                    </ul>

                </div>

            </div>            

        </div>