Menu icon Foundation
Mobile TopBar Toggle not working

I have downloaded the latest version of foundation 5 from github, and I am having a problem the the mobile topbar toggle, when I click the menu button it doesn't display the menu as it should.

Just to clarify I have downloaded the latest version from github which includes:

Foundation.topbar.js version: '5.0.3',

What am I doing wrong or is this an on going issue, I had read in previous posts that this had been fixed, however I'm still having the problem with the latest version hence the new post.

Thanks

<header>
    <div class="fixed header-border-bottom">
		<nav class="navigation  nav-collapse top-bar">
			<ul class="title-area">
				<!-- Title Area -->
				<li class="name">
					<h1><a href="#">PixelByte</a></h1>
				</li>
				<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
				<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="#home">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</section>
		</nav>
	</div>
</header>

topbarmenu icon

I have downloaded the latest version of foundation 5 from github, and I am having a problem the the mobile topbar toggle, when I click the menu button it doesn't display the menu as it should.

Just to clarify I have downloaded the latest version from github which includes:

Foundation.topbar.js version: '5.0.3',

What am I doing wrong or is this an on going issue, I had read in previous posts that this had been fixed, however I'm still having the problem with the latest version hence the new post.

Thanks

<header>
    <div class="fixed header-border-bottom">
		<nav class="navigation  nav-collapse top-bar">
			<ul class="title-area">
				<!-- Title Area -->
				<li class="name">
					<h1><a href="#">PixelByte</a></h1>
				</li>
				<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
				<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="#home">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</section>
		</nav>
	</div>
</header>
Ronn almost 6 years ago

I guess the javascript files aren't loading correct.

From the docs:

Before you can use the top bar you'll want to verify that jQuery and foundation.js are available on your page. You can refer to the JavaScript documentation on setting that up.

Just add foundation.topbar.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>

TC over 5 years ago

This is the code in a foundation template. The menu did not toggle.

document.write('<\/script>')



$(document).foundation();

This does not load the jQuery. Once I added a link to the jQuery.js file, something like this:

(added after the footer)

The menu worked fine for me.

I was under the impression the foundation.min.js loaded all of the JavaScript/jQuery files needed. I read this in the documentation under the heading What You Get. Is t he documentation incorrect?

I would appreciate clarification on this issue.

This is important to prevent all of the calls to files thus, slowing page load time.

Rafi Benkual over 5 years ago

You shouldn't need to individually add component JS files unless you are not using other Foundation JS components.

This has the core and Foundation JS

 <script src="/js/foundation.min.js"></script>