WordPress one-page theme navigation not working properly

Other Questions Wordpress
1

I converted my HTML single page site to WordPress and now I have problems with the navigation. My site has 4 different sections with matching menu links.

In the original HTML version, clicking menu items would smoothly scroll to the right section. After converting to WordPress, everything displays correctly but the menu links stopped working.

Here’s my WordPress code:

<!-- Navigation area -->
<div class="col-lg-8 col-md-10 col-xs-4 navigation-menu text-right">
    <ul class="primary-menu hidden-sm hidden-xs">
    <?php
        global $current_page;
        $page_args = array('post_type'=>'page','orderby'=>'menu_order','order'=>'ASC');
        $page_list = get_posts($page_args);

        foreach($page_list as $current_page) : setup_postdata($current_page);?>
            <li><a href="#<?php echo $current_page->post_name; ?>"><?php the_title(); ?></a></li>
        <?php endforeach; ?>
    </ul>
    <a href="#" class="mobile-toggle visible-sm visible-xs"><i class="fa fa-menu"></i></a>
</div>

<!-- Content Section -->
<div class="page-section" id="<?php echo $current_page->post_name; ?>">
    <div class="wrapper">
        <div class="row">
            <div class="section-header col-md-12 text-center">
                <h2>Our Services</h2>
            </div>
        </div>
        <div class="row">
            <?php
            global $current_page;
            $service_args = array('post_type'=>'service','orderby'=>'menu_order','order'=>'ASC');
            $service_list = get_posts($service_args);
            foreach($service_list as $current_page) : setup_postdata($current_page); ?>

             <div class="col-lg-3 col-sm-6">
                <div class="service-box" id="service-item-1">
                    <div class="service-image">
                        <i class="fa fa-<?php echo $service_icon; ?>"></i>
                    </div>
                    <div class="service-text">
                        <div class="service-inner">
                           <h3><?php the_title(); ?></h3>
                           <?php the_content(); ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>

           </div>
    </div>
</div>

What could be causing this issue with the anchor links not working in WordPress?

2

yeah, sounds like you need smooth scroll for those anchors. wp doesn’t do it by default, so either add some js for it or grab a plugin to make those # links smoothly scroll to their sections.

3

Looking at your code, the main issue is that you’re overwriting the $current_page variable in your foreach loops. In the navigation section, you set $current_page to each page, but then in the content section, you’re reusing the same variable name for services. This means the ID in your div will always be the last service post name, not the page post name. Try using different variable names like $page_item for pages and $service_item for services. Also make sure your section IDs actually match what the navigation links are pointing to - right now it looks like there’s a mismatch between what you’re generating in the menu versus what IDs exist on the page.

4

Had similar problems when I moved my single page site to WordPress last year. The code structure looks fine but you’re probably missing the actual section containers with matching IDs. Your navigation generates links like #about, #services etc, but you only show one content section in your code sample. You need to make sure each page you’re querying actually has a corresponding section div with the right ID on your front page template. Also check if you’re actually outputting all sections or just one - typically you’d loop through pages again to create multiple sections, not just the navigation. Without seeing your complete template it’s hard to tell, but that’s usually where the disconnect happens.