Login

I'm having troubles trying to get Zurb's Foundation Topbar to work while on a mobile screen.

I'm testing on chrome with the screen width set to the smallest. All CSS and JS are loaded, the menu looks fine until you click and nothing.

Note: I'm using WordPress.

Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title><?= (is_front_page() ? 'Revive Architects | London\'s most trusted architect for conversions / extensions ' : get_post_meta($post->ID, '_seo_title', true)); ?></title>
<meta name="description" content="<?= (is_front_page() ? 'London\'s most trusted architect. Over 25 years of architectural experience, we have helped hundreds over in clients in the London area.' : get_post_meta($post->ID, '_seo_description', true)) ?>">
<meta name="author" content="www.werdigital.co.uk">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/foundation.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<? bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />



<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/jquery.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/modernizr.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/fastclick.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/js/script.js"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>



<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<? wp_head(); ?>
</head>

<body>
<div class="page clearfix">
<header>
<div class="row header-wrapper">
<div class="large-12 medium-12 columns">
<a href="<? bloginfo('url'); ?>"><img class="logo" alt="" src="<? bloginfo('template_url'); ?>/images/logo.png" /></a>
</div>
</div>
<div class="top-nav">
<div class="row">
<div class="large-12 medium-12 columns">
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<a href="<?= get_option('home'); ?>"><img class="logo-icon" width="100" alt="" src="<? bloginfo('template_url'); ?>/images/logo-icon.png" /></a>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>

<section class="top-bar-section">
<ul id="menu-primary" class="right"><li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="http://dev.revivearchitects.co.uk/about-us/">About Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://dev.revivearchitects.co.uk/architect-projects/">Projects / Services</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23"><a href="http://dev.revivearchitects.co.uk/blog/articles-and-guides/">Articles</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://dev.revivearchitects.co.uk/contact-us/">Contact Us</a></li>
</ul>
</section>
</nav>
</div>
</div>
</div>
</div>
</header>

Try wrapping your `foundation()` call in a `jQuery(document).ready()` function like so:

<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>

That's *probably* not the issue... But I'm wondering if your DOM is loading before or after your JS has a chance to fully load since you're loading your JS in the head.

Next, it looks like you might be missing the **base** Foundation JS file. You have this:

<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>

But `foundation.topbar.js` *depends* on `foundation.js` (as do all of the Foundation plugins).

Next, how are you planning to class your submenus that WordPress is generating? Notice the markup in the Zurb Foundation docs:

<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>

If you inspect your **generated** content I'm betting you're missing the `"has-dropdown"` class on the `<li>` and the `"dropdown"` class on the `<ul>`.

**[edit]**

I also noticed that you edited your markup in your question and now have two `<nav>` elements and both are defining a `data-topbar` attribute. (I'm not sure if that's just a paste error in your question or if your markup really looks like that).

Try using the following markup instead, just as a test, to see if the Foundation Topbar functionality is working (this is the sample from the docs):

<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</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="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>
</ul>
</li>
</ul>


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

If that **does** work, then reinspect your own markup, compare & contrast what classes and elements and nesting might be different and then adjust your code accordingly. It might just be easier to *start* with their example, and then tweak from there.

prent277

igged292793