Issues setting up top bar / responsive menu

Hi,
For some reason, both the top bar and the responsive menu toggle bar are displaying at the same time no matter what the screen size.

I have the cdn for the .js linked up in the header:

As well as all of the necessary .js files above the closing body tag, pathed to their correct file location (according to my directory structure /js/ and /js/plugins/):

foundation.core.js
foundation.responsiveMenu.js
foundation.util.triggers.js
foundation.util.mediaQuery.js
foundation.responsiveToggle.js
foundation.util.mediaQuery.js
foundation.util.motion.js

Is there something that I am missing?

@ScottLargent can you post your HTML for those components?

<!doctype html>
<html class="no-js" lang="en">
  <head>
	<meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lorem ipsum dolor sit amet consectetur adipisicing elit.</title>
    **<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" **
**		  integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">**
    <link rel="stylesheet" href="css/ae.css">
    <link href="https://fonts.googleapis.com/css?family=Cabin|Roboto:400,700|Roboto+Condensed:400,700" rel="stylesheet">
    **<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-y8J9M8tizbfX7Vhi5x1ikNeZ/WEcwwnlTvOaloXTcQw=" crossorigin="anonymous"></script>**
    <script src="https://kit.fontawesome.com/697914a5f6.js" crossorigin="anonymous"></script>  
  </head>
  <body>
	<!-- Top Content -->  
    <div class="grid-container full frame">
	  <div class="grid-x">
	    <div class="cell small-12 nav">
		  <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
            <button class="menu-icon" type="button" data-toggle="example-menu"></button>
            <div class="title-bar-title">Menu</div>
          </div>
          <div class="top-bar" id="example-menu">
            <div class="top-bar-left">
              <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Site Title</li>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </div>
            <div class="top-bar-right">
              <ul class="menu">
      		    <li><input type="search" placeholder="Search"></li>
      			<li><button type="button" class="button">Search</button></li>
    		  </ul>
  			</div>
		  </div>  
	    </div>
	  </div>
    </div>
	  
	**<!-- JS -->   **
**    <script src="js/foundation.js"></script>**
**	<script src="js/plugins/foundation.core.js"></script>**
**	<script src="js/plugins/foundation.responsiveMenu.js"></script>**
**      <script src="js/plugins/foundation.util.triggers.js"></script>**
**      <script src="js/plugins/foundation.util.mediaQuery.js"></script>**
**    <script src="js/plugins/foundation.responsiveToggle.js"></script>**
**      <script src="js/plugins/foundation.util.mediaQuery.js"></script>**
**      <script src="js/plugins/foundation.util.motion.js"></script>**  	
	  
	<!-- Random Image on Page Refresh -->  
	<script>
	  function randomImage(){
        var images = [
          'images/main/resized/one.png',
          'images/main/resized/two.png',
		  'images/main/resized/three.png',
		  'images/main/resized/four.png',
          'images/main/resized/five.png'];
        var size = images.length;
        var x = Math.floor(size * Math.random());
          console.log(x);
  		var element = document.getElementsByClassName('top-content');
  		  console.log(element);
  		  element[0].style["background-image"] = "url("+ images[x] + ")";
      }

      document.addEventListener("DOMContentLoaded", randomImage);  
	</script>
  </body>
</html>

Thank you for such a quick response!!!

@ScottLargent your code works for me (I ignored your custom JavaScript) .

The hamburger menu only appears on small screens and when clicked displays a menu with the title “Site Title” and menu items: One Two Three

It does not display on Medium screens and up because you have the attribute set:
data-hide-for=“medium”

If that is not your intended interaction please explain what you expect it to do.

If that is what you were expecting but you aren’t seeing it on your machine my guess is you have the wrong scripts selected and/or don’t have the Foundation css stylesheet(s) loaded.

The stylesheet you’re loading is your custom css but does it include the foundation css? That is, did you build the sass version of Foundation or are you using the precompiled css version? If the latter, link it in your <head> section.

If you’re using sass and the latest version on of Foundation 6.6.3, include the output css of the sass build, in my case it is:
app.css
and then the only script you should need is app.js (if you built with the Zurb template)
for example,
<script src=“assets/js/app.js”></script>

Let me know if you’re still having issues.

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link rel="stylesheet" href="assets/css/app.css" /> <!-- this has the foundation css compiled from sass-->

</head>
<body>
    <!-- Top Content -->
    <div class="grid-container full frame">
        <div class="grid-x">
            <div class="cell small-12 nav">
                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>
                <div class="top-bar" id="example-menu">
                    <div class="top-bar-left">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <li class="menu-text">Site Title</li>
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><input type="search" placeholder="Search"></li>
                            <li><button type="button" class="button">Search</button></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    

    <script src="assets/js/app.js"></script>
</body>
</html>

When I take the same code that I gave you and bring it up - with my custom js removed - I can still see both bars at the same time and the hamburger doesn’t work at all.

So I did the following:

  1. My foundation.css was being pulled in here:

I usually do this because I don’t use SASS. Never saw the point of learning it. Instead, I rely on my own custom css file. However, since things weren’t working, I changed this to a direct path to the files. /css/foundation.css in the head. I also included the foundation.min.css and app.css files.

  1. Your comment about removing my custom .js had me curious that there was a conflict, so I removed it.

  2. I noticed that you had app.js appended, so I added it.

I am still getting the same result and can see both bars. You can see it here:
Live Demo.

Hey @ScottLargent a couple of things:

  • Foundation requires jQuery so this must be loaded ABOVE your Foundation js scripts.
  • The script for loading Foundation from the CDN must be placed above the closing body tag, not in the header.
  • That cdn script did not work on my machine with the integrity and crossorigin attributes but worked when I stripped those off. That could just be an issue with my machine, etc.
  • An alternative to that cdn script would be to use the original Foundation.js script that ships with foundation
  • All those other Foundation js scripts are irrelevant for the sample you gave me and are most likely included in the full (and minified) foundation.js script.
  • The app.js script (or it's contents) must be loaded after the foundation.js script to initialize it with jQuery. Without this, the javascript in Foundation won't work.
  • Here’s your code back modified, commented, and works on my machine with only 3 scripts required. I hope this helps:

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lorem ipsum dolor sit amet consectetur adipisicing elit.</title>
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css"
          integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous"> -->
    <!--<link rel="stylesheet" href="css/foundation.css"> // Don't need this, you are including the minified version instead -->
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/ae.css">
    <link href="https://fonts.googleapis.com/css?family=Cabin|Roboto:400,700|Roboto+Condensed:400,700" rel="stylesheet">
    <script src="https://kit.fontawesome.com/697914a5f6.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Top Content -->
    <div class="grid-container full frame">
        <div class="grid-x">
            <div class="cell small-12 nav">
                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>
                <div class="top-bar" id="example-menu">
                    <div class="top-bar-left">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <li class="menu-text">Site Title</li>
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><input type="search" placeholder="Search"></li>
                            <li><button type="button" class="button">Search</button></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JS -->
    <!-- **** Foundation relies on jQuery so jQuery must be loaded ABOVE Foundation **** -->
    <!-- I'm not sure which version is included with Foundation but I think it is 3.4.1 -- check for yourself to be sure -->
    <script src="js/jquery.js"></script>
    <!-- your code works with the foundation version from the cdn -- but it does NOT work with all that integrity and crossorigin stuff on my machine -->
    <!--
    <script src="js/plugins/foundation.core.js"></script>
    <script src="js/plugins/foundation.responsiveMenu.js"></script>
    <script src="js/plugins/foundation.util.triggers.js"></script>
    <script src="js/plugins/foundation.util.mediaQuery.js"></script>
    <script src="js/plugins/foundation.responsiveToggle.js"></script>
    <script src="js/plugins/foundation.util.mediaQuery.js"></script>
    <script src="js/plugins/foundation.util.motion.js"></script>
    -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script><!-- integrity="sha256-y8J9M8tizbfX7Vhi5x1ikNeZ/WEcwwnlTvOaloXTcQw=" crossorigin="anonymous"></script>-->
    <!-- the function in app.js is necessary as it initializes jQuery for Foundation and must be loaded after Foundation -->
    <script src="js/app.js"></script>

</body>
</html>
1 Like

You completely nailed it. The issue was the .js and the lack of Jquery.
Ended up with:

<!-- .css files in <head></head>  -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css">
  <link rel="stylesheet" href="css/ae.css">
  <link href="https://fonts.googleapis.com/css?family=Cabin|Roboto:400,700|Roboto+Condensed:400,700" rel="stylesheet">

<!-- JavaScript files above closing body tag -->
  <script src="js/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>
  <script src="js/app.js"></script>
</body>
```:
*The cdn version of the min.css file seems to work better with the XY Grid for me.  

Thank you so much for the troubleshooting!!!  I could not have done this without you.

Excellent! I didn’t want to strip out all of your links and script references but did comment them out so you could easily see what the needed ones were. Glad you recognized that app.css reference was actually irrelevant since all your custom css was in your ae.css file and were able to further trim down the references.

By the way, the reason I started using the sass version of Foundation was so that making theme changes (colours, global-row-width {used by grid-container to set gutters}, changing breakpoints, rounded corners on all panels, etc., etc.) would be easy just by adding to or changing values in the _settings.scss file (which then gets referenced when the rest of the scss is compiled into css. Without being able to modify the scss, you instead have to override styles in your custom css file which can be a lot more tedious and prone to error (example, missing a style or colour, etc.). For example, to change the primary colour of your site and have it referenced by all the default Foundation styles you only need to change one variable in the foundation-palette (there are 5 colours in total in the default palette which you can change) … same goes for the success, warning, and alert colours for buttons, etc.

SASS is not hard to learn, it is essentially CSS but with variables and functions available to you to use at your discretion. You may find it gives you more power and flexibility when customizing your designs. Have a look: Sass-lang.com/guide. But of course, work with whatever tools/methods you prefer.