Navs not working

[dancrowe]

I put my gridder within a wordpress archive loop and my navigation stopped working.

            <ul class="gridder">

                <?php $counter = 0; if (have_posts()) : while (have_posts()) : the_post(); $counter++; ?>

                    <li class="gridder-list" data-griddercontent="#content<?php echo $counter; ?>">
                        <article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" data-equalizer-watch>
                            <section class="featured-image" itemprop="articleBody">
                                <?php if (has_post_thumbnail( $post->ID )) { ?>
                                    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('blog-archive'); ?></a>
                                <?php } else { ?>
                                <img src="http://via.placeholder.com/420x275">
                                <?php } ?>
                            </section> <!-- end article section -->                                     
                        </article> <!-- end article -->
                    </li>
                    <div id="content<?php echo $counter; ?>" class="gridder-content">
                        <h3 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                        <?php the_field('short_bio'); ?>
                    </div>

                <?php endwhile; ?>  

                    <?php joints_page_navi(); ?>

                <?php else : ?>

                    <?php get_template_part( 'parts/content', 'missing' ); ?>

                <?php endif; ?>

            </ul>

Page with gridder on it.

https://hosting.acscreativedev.com/~acscreative/team/

[orion3dgames]

This is because in you markup you are mixing the navigation and the content (li, div, li, div). It should be:

*Incorrect

<ul class="gridder">
    <li class="gridder-list" data-griddercontent="#content1"><img src="http://placehold.it/600x400" /></li>
    <div id="content1" class="gridder-content"> Content goes here... </div>
</ul>

*Correct

<ul class="gridder">
    <li class="gridder-list" data-griddercontent="#content1"><img src="http://placehold.it/600x400" /></li>
</ul>
<div id="content1" class="gridder-content"> Content goes here... </div>