Menu icon Foundation
Foundation 5 TopBar Mobile Navigation

I've been working on a small project since Foundation 5 came out. I'm trying to get the TopBar navigation to work but I've had no success yet. I've created a simple theme with Wordpress. It's currently on a local server that isn't live.

This is the code in my files. I would appreciate any help. The first file is the navigation section out of my header.php file. The second file is the footer.php section where the jQuery items are loaded.

<div class="navigation">
    <div class="row contain-to-grid sticky">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name"></li>
                <li class="toggle-topbar menu-icon">
                    <a href="#">
                        <span>Menu</span>
                    </a>
                </li>
            </ul>
            <section class="top-bar-section">
                <!-- Left Nav Section --> 
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'left' ) ); ?>
            </section>
        </nav>
    </div>
</div>

        <script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/foundation/foundation.topbar.js"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
        <?php wp_footer(); ?>
    </body>
</html>

topbarFoundation 5Mobile Navigation

I've been working on a small project since Foundation 5 came out. I'm trying to get the TopBar navigation to work but I've had no success yet. I've created a simple theme with Wordpress. It's currently on a local server that isn't live.

This is the code in my files. I would appreciate any help. The first file is the navigation section out of my header.php file. The second file is the footer.php section where the jQuery items are loaded.

<div class="navigation">
    <div class="row contain-to-grid sticky">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name"></li>
                <li class="toggle-topbar menu-icon">
                    <a href="#">
                        <span>Menu</span>
                    </a>
                </li>
            </ul>
            <section class="top-bar-section">
                <!-- Left Nav Section --> 
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'left' ) ); ?>
            </section>
        </nav>
    </div>
</div>

        <script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/foundation/foundation.topbar.js"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
        <?php wp_footer(); ?>
    </body>
</html>
Alex Plaza over 5 years ago

what if you add the "foundation.topbar.js" after foundation.min.js?

Matt Shirey over 5 years ago

I loved that js file reference and still no luck. Does my markup look okay?

Alex over 5 years ago

What kind of problem are you having with the top bar? I was having trouble with the menu with v5.0 - the menu wouldn't expand. I downloaded and applied v5.0.2 this morning and the navigation worked fine.

Stephen Mullen over 5 years ago

The jQuery that comes with WordPress uses noConflict. You need to change $(document).foundation(); to jQuery.noConflict();jQuery(document).foundation();
Also, you should enqueue your JavaScript so that it loads the jQuery that comes with WordPress. If you load it via an alternate in your theme folder then you may end up with 2 conflicting copies when a plugin loads the one from WordPress as well.

function load_my_scripts() {
  wp_enqueue_script(
    'foundation_js',
    get_template_directory_uri() . '/js/foundation.min.js',
    array('jquery'),
    '5.0.2',
    true
  );
  wp_enqueue_script(
    'foundation_init_js',
    get_template_directory_uri() . '/js/foundation_init.js',
    array('foundation_js'),
    '1.0',
    true
  );
}

add_action('wp_enqueue_scripts', 'load_my_scripts',0);

The foundation_init.js in this example contains the jQuery.noConflict();jQuery(document).foundation();

Sinisa Kupresak over 4 years ago

Thanks Stephen, works for me.