Menu icon Foundation
Mobile Menu not working

Hello, and thanks in advance for your help.

My mobile menu is not working. The word "Menu" and the menu icon show up, but the navigation links don't work.

Link to problem is willmangum.com/index.html

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

        <section class="top-bar-section">
         
          <ul class="right">
            <li class="xxx"><a href="#Design">Design</a></li>
            <li class="xxx"><a href="#Illustration">Illustration</a></li>
            <li class="xxx"><a href="#Horticulture">Horticulture</a></li>
            <li class="xxx">
            <script type="text/javascript">
    		  <!--
			  var a = "email";
			  var b = "william.h.mangum";
			  var off = "*&";
			  var c = "gmail.";
			  var d ="com";
			  document.write("<a href=" + "mail" + "to:" + b + "@" + c  + d + ">Contact" + "</a>");
			  //-->
			</script> </li>
          </ul>
        </section>
      </nav>
	</div>
            

         

Here are the scripts called:

<script src="js/foundation/foundation.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script type="text/javascript" src="javascripts/sticky-footer.js"></script>
         

mobilemenureflexiveFoundationtoggletopbartop-bar

Hello, and thanks in advance for your help.

My mobile menu is not working. The word "Menu" and the menu icon show up, but the navigation links don't work.

Link to problem is willmangum.com/index.html

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

        <section class="top-bar-section">
         
          <ul class="right">
            <li class="xxx"><a href="#Design">Design</a></li>
            <li class="xxx"><a href="#Illustration">Illustration</a></li>
            <li class="xxx"><a href="#Horticulture">Horticulture</a></li>
            <li class="xxx">
            <script type="text/javascript">
    		  <!--
			  var a = "email";
			  var b = "william.h.mangum";
			  var off = "*&";
			  var c = "gmail.";
			  var d ="com";
			  document.write("<a href=" + "mail" + "to:" + b + "@" + c  + d + ">Contact" + "</a>");
			  //-->
			</script> </li>
          </ul>
        </section>
      </nav>
	</div>
            

         

Here are the scripts called:

<script src="js/foundation/foundation.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script type="text/javascript" src="javascripts/sticky-footer.js"></script>
         
kevin basteleus almost 5 years ago

Did you try to put the scripts in the body? According the documentation the scripts need to be between the body tags:

"Using the Javascript
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/vendor/jquery.js"></script>
  <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>

Will Mangum almost 5 years ago

That didn't seem to do it, unfortunately. Thanks though, Kevin.

Adam Powell almost 5 years ago

It's because you don't have any code for a mobile menu.

By mobile menu, I assume you mean the off-screen navigation drawer that slides in when you click the menu word/icon.

The way it works is that for a top bar menu (I see you're using the "sticky" menu) and a side drawer mobile menu there actually has to be code for 2 menus and the appropriate one is hidden based on screens size (media query).

The documentation of this feature and what is needed to get it working is here:
http://foundation.zurb.com/docs/components/offcanvas.html

Your site currently only has the top-bar menu/nav.

Will Mangum almost 5 years ago

What I'm shooting for is a top bar menu that functions like the examples on the Top Bar page:
http://foundation.zurb.com/docs/components/topbar.html
So that when you shrink your web browser down as small as it will go (or when you view on your smart phone browser) the top bar collapses down and toggles the navigation.

Here is the HTML Template I used to get my project up and running:
http://foundation.zurb.com/templates/marketing.html
As far as I can see, that template doesn't even load foundation.topbar.js

So I'm confused.

Will Mangum almost 5 years ago

I figured this out.

I went back to the marketing.html file, copied it and put it on my server. Switched out .js files for my local versions, and the navigation was still breaking. So then I figured out that I had forgotten the snippet of code at the bottom before the ending body tag...
```

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




$(document).foundation();




$(document).foundation();

  var doc = document.documentElement;
  doc.setAttribute('data-useragent', navigator.userAgent);
</script>
So placed that code in my html and I switched out the first two .js files for local versions. Still didn't work. The last two .js files wouldn't work when I tried to use local versions. Anyways, I copied the code for foundation.js and saved it as a local file, and took out the link for the second jquery.js script. And bam, my navigation works.

Will Mangum almost 5 years ago

of course, now my lightbox doesn't work. so I have a problem with competing jquery files.