Menu icon Foundation
Top bar in Wordpress

I built a theme for wordpress but my top bar is not working. When in mobile view the navigation list is still present. The menu button works but nothing shows up. Is there something I am missing in my markup?

<div class="navigation">
    <div class="row nav">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name"><a href="index.php/home"><img src="<?php bloginfo('url');?>/wp-content/themes/mmbc/images/mmbcLogoText.png" /></a></li>
                <li class="toggle-topbar menu-icon">
                    <a href="#">
                        <span>Menu</span>
                    </a>
                </li>
            </ul>

            <section class="top-bar-section right">
                <!-- Left Nav Section --> 
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'left' ) ); ?>
                    			    <div class="large-1 column hide-for-small">
						<a href="https://www.facebook.com/MohicanMalabarBikeClub/app_208195102528120?ref=br_tf" target="new-window" class="button tiny">DONATE</a></li>
					</div>
            </section>
        </nav>
    </div>
</div>
            

         

wordpresstop barnavigation

I built a theme for wordpress but my top bar is not working. When in mobile view the navigation list is still present. The menu button works but nothing shows up. Is there something I am missing in my markup?

<div class="navigation">
    <div class="row nav">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name"><a href="index.php/home"><img src="<?php bloginfo('url');?>/wp-content/themes/mmbc/images/mmbcLogoText.png" /></a></li>
                <li class="toggle-topbar menu-icon">
                    <a href="#">
                        <span>Menu</span>
                    </a>
                </li>
            </ul>

            <section class="top-bar-section right">
                <!-- Left Nav Section --> 
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'left' ) ); ?>
                    			    <div class="large-1 column hide-for-small">
						<a href="https://www.facebook.com/MohicanMalabarBikeClub/app_208195102528120?ref=br_tf" target="new-window" class="button tiny">DONATE</a></li>
					</div>
            </section>
        </nav>
    </div>
</div>
            

         
Asif over 5 years ago

Here are some good solutions to your wordpress walker which you can use:

http://foundation.zurb.com/forum/posts/438-enabling-foundation-5-nav-with-wordpress-menus

Hope that helps