Menu icon Foundation
IE 11, Foundation 5, and Top Bar

I'm having some difficulty tracking down an issue, and right up front let me say that the issue might not even be with Foundation 5. I have a site built with Foundation 5.3.0, and one visitor is telling me that the site doesn't work in Internet Explorer 11 on a laptop running Windows 8.1. She tells me that the top bar shows the menu icon instead of the full menu (behaving like it's on a small-screen device even though it's not), and the menu icon doesn't respond to mouse clicks. The same site works fine in Firefox on the same computer.

When I test the site in the office in Safari on my MacBook Pro, it works fine. When I test the site in Internet Explorer 11 on a Windows 7 test box, it works fine. Same with Firefox (whatever the heck the version number is these days... something like 4 million or something). As a result, I can't nail down where the issue might be (and it might be something specific to her computer).

I'm going to build a very simple page with a top bar and nothing else to see if she can visit the page without errors to try and narrow down the possible problems. In the meantime... any ideas? Ever heard of this issue before?

Thanks.

top barie 11internet explorer 11Foundation 5

I'm having some difficulty tracking down an issue, and right up front let me say that the issue might not even be with Foundation 5. I have a site built with Foundation 5.3.0, and one visitor is telling me that the site doesn't work in Internet Explorer 11 on a laptop running Windows 8.1. She tells me that the top bar shows the menu icon instead of the full menu (behaving like it's on a small-screen device even though it's not), and the menu icon doesn't respond to mouse clicks. The same site works fine in Firefox on the same computer.

When I test the site in the office in Safari on my MacBook Pro, it works fine. When I test the site in Internet Explorer 11 on a Windows 7 test box, it works fine. Same with Firefox (whatever the heck the version number is these days... something like 4 million or something). As a result, I can't nail down where the issue might be (and it might be something specific to her computer).

I'm going to build a very simple page with a top bar and nothing else to see if she can visit the page without errors to try and narrow down the possible problems. In the meantime... any ideas? Ever heard of this issue before?

Thanks.

Rafi Benkual about 5 years ago

Can we see a link or some code to see what is happening?

Can't replicate it on browserstack https://www.notableapp.com/posts/e647a4878506489a4e306e57afecc5104cd9fcd4

Ian Farlow about 5 years ago

A very, very simple test page: http://www.elkmontpoa.com/test_0825/

Here is the code:

 <!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" ><![endif]-->
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IE Test 3</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/foundation.css" />
    <link rel="shortcut icon" href="favicon.ico?v=1" />
    <script src="../js/vendor/modernizr.js"></script>
    <script src="../js/vendor/jquery.js"></script>
    <script src="/js/vendor/fastclick.js"></script>
  </head>
  <body>

    <!--!TOP BAR-->

    <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</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">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="active"><a href="#">Right Button Active</a></li>
          <li class="has-dropdown">
            <a href="#">Right Button Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
              <li class="active"><a href="#">Active link in dropdown</a></li>
            </ul>
          </li>
        </ul>

        <!-- Left Nav Section -->
        <ul class="left">
          <li><a href="#">Left Nav Button</a></li>
        </ul>
      </section>
    </nav>

    <!--!MAIN CONTENT-->



    <!--!FOUNDATION SCRIPTS-->

    <script src="../js/foundation/foundation.js"></script>
    <script src="../js/foundation/foundation.topbar.js"></script>
    <script>
      $(window).bind("load", function() {
        $(document).foundation();
      });
    </script>
  </body>
</html>

Ben Clark about 5 years ago

Did you ever find a solution to this problem? I've just had a friend tell me the exact same issue is happening, but I can't replicate it.

Ian Farlow about 5 years ago

Nope, no help from the developers.

Dustin Cook about 5 years ago

I have seen this to on a a prototyped navigation I have been working with on an internal server (not accessible to the public so no link).

I can't find the bug either.