Menu icon Foundation
Off-canvas not working with your WordPress theme?

Hello, people.

For many days I struggled trying to make the Off-canvas menu work in my WordPress theme. I read many posts here, at Stack Overflow and beyond. None of that worked. Here's what solved my problem.

Many authors say you should put your JavaScript code on footer.php this way:

					</footer>
				<a class="exit-off-canvas"></a>
			</div>
		</div>
		<script src="js/vendor/jquery.js"></script>
		<script src="js/foundation.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			$(document).foundation();
		</script>
		<?php wp_footer(); ?>
	</body>
</html>       

         

But today I noticed that Chrome's console returned "Failed to load resource: the server responded with a status of 404 (Not Found)" for all those .js files. So I changed my script sources to this format:

<script src="http://www.yoursite.com/wp-content/themes/YourTheme/js/vendor/jquery.js"></script>
<script src="http://www.yoursite.com/wp-content/themes/YourTheme/js/foundation.min.js"></script>
<script src="http://www.yoursite.com/wp-content/themes/YourTheme/js/app.js"></script>
            

         

So it's working fine now. If this solves your Off-canvas malfunction, please reply and let me know.

PS: Sorry for any English typo. :)

off-canvaswordpress

Hello, people.

For many days I struggled trying to make the Off-canvas menu work in my WordPress theme. I read many posts here, at Stack Overflow and beyond. None of that worked. Here's what solved my problem.

Many authors say you should put your JavaScript code on footer.php this way:

					</footer>
				<a class="exit-off-canvas"></a>
			</div>
		</div>
		<script src="js/vendor/jquery.js"></script>
		<script src="js/foundation.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			$(document).foundation();
		</script>
		<?php wp_footer(); ?>
	</body>
</html>       

         

But today I noticed that Chrome's console returned "Failed to load resource: the server responded with a status of 404 (Not Found)" for all those .js files. So I changed my script sources to this format:

<script src="http://www.yoursite.com/wp-content/themes/YourTheme/js/vendor/jquery.js"></script>
<script src="http://www.yoursite.com/wp-content/themes/YourTheme/js/foundation.min.js"></script>
<script src="http://www.yoursite.com/wp-content/themes/YourTheme/js/app.js"></script>
            

         

So it's working fine now. If this solves your Off-canvas malfunction, please reply and let me know.

PS: Sorry for any English typo. :)

Rafi Benkual over 4 years ago

That's good to know though I don't know why that would happen.

I did also notice that, you have foundation initialized in your body, but it is probably also initialized in app.js

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

If so, you just need one.