WordPress Navigation active

1 Views

I have been creating a one page wordpress site, i want to be able to have the navigation links be active once it goes to that particuler div

http://www.copeswebdevelopment.co.uk/

Read More

I dont know what type of code you want to see just tell me and i will show you 

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php echo home_url(); ?>">
                    <img src="http://www.copeswebdevelopment.co.uk/wp-content/uploads/2015/06/BusinessLogowp.png">
                </a>
        </div>

        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav navbar-right',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>


</div>
    <!-- /container -->
Post Views: 1

Related posts

1 comment

  1. For an anchors menu, you can set the active section with some JS (here in jQuery) that will change the active section depending of the position in the page. That way, it will change the active state not only on click events but when user manually scroll on the page as well.

    First we set document.ready and window.scroll to trigger the function that will handle the change of state and build an array of the page sections based on the menu links:

    var activePage, sections = [];

$(document).ready(function () {
    changeActiveMenu();
    $('nav a').each(function() {
        sections.push($(this).attr('href'));
    });
    $(window).scroll(function() {
        changeActiveMenu();
    });
});

    Then the following function will first check which section is displayed using $.isOnScreen plugin (you’ll need to include that to make this work). As it’s currently set it trigger to active a section that is at least visible at 50%.

    function changeActiveMenu()
{
    var page = null;
    for(var key in sections) {
        if($(sections[key]).isOnScreen(null, 0.5)) {
            page = sections[key];
        }
    }
    if(page != null && page != activePage) {
        $('nav a.active').removeClass('active');
        $('nav a[href='+page+']').addClass('active');
        activePage = page;
    }
}

Comments are closed.