Zurb Foundation Topbar Not Working At All

1 Views

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.

Read More

Note: I’m using WordPress.

Here’s my code: 

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

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <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" />

        <!-- STYLESHEETS -->
        <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" />
        <!-- /STYLESHEETS -->

        <!-- JS -->
        <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>
        <!-- /JS -->

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <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>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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>
     <!-- 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>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <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.