Menu icon Foundation
toggle-topbar not working on small browser

i have tried everything possible to make sure it work, i even copied the html code from foundation page it still doesn't work even though it work on the website, please can someone help me am new to foundation 5

<nav class="top-bar ex" data-topbar>
    			<ul class="title-area right">
					<li class="name"><h1></h1></li>

					<!-- Mobile Menu Toggle -->
					<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
				</ul>

				<section class="top-bar-section">

					<ul class="left">


						<!--
							Navigation Menu
						-->
						<ion:navigation   active_class="active"  >
							
							<li>
								<a href="<ion:url />"><ion:title /></a>
							</li>
							<li class="divider"></li>
						</ion:navigation>


						<!--
							Language Selector
						-->
						<ion:languages tag="ul" class="right">
							<li <ion:language:is_active> class="active"</ion:language:is_active>>
								<a class="small button" href="<ion:language:url />">
									<ion:language:code />
								</a>
							</li>
						</ion:languages>

					</ul>

				</section>
			</nav>
            

         

toggletopbarsmall medium

i have tried everything possible to make sure it work, i even copied the html code from foundation page it still doesn't work even though it work on the website, please can someone help me am new to foundation 5

<nav class="top-bar ex" data-topbar>
    			<ul class="title-area right">
					<li class="name"><h1></h1></li>

					<!-- Mobile Menu Toggle -->
					<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
				</ul>

				<section class="top-bar-section">

					<ul class="left">


						<!--
							Navigation Menu
						-->
						<ion:navigation   active_class="active"  >
							
							<li>
								<a href="<ion:url />"><ion:title /></a>
							</li>
							<li class="divider"></li>
						</ion:navigation>


						<!--
							Language Selector
						-->
						<ion:languages tag="ul" class="right">
							<li <ion:language:is_active> class="active"</ion:language:is_active>>
								<a class="small button" href="<ion:language:url />">
									<ion:language:code />
								</a>
							</li>
						</ion:languages>

					</ul>

				</section>
			</nav>
            

         
Vanessa Kestering about 5 years ago

Have you tried to change the breakpoint-variables for topbar?

 $topbar-breakpoint
 $topbar-media-query