0

I was able to successfully add code to my script.js file so that the links in the nav section would highlight as you scrolled down the page.

But ever since I converted my webpage into a wordpress template, the javascript that allowed the highlighting nav links no longer works.

I have played around w/ the code to try and get it to work again, but nothing works.

I do not know how this is supposed to work now that I am attempting to do the same thing in wordpress.

Below is the old code. Any help is greatly appreciated.

/* Script.js */

const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('nav .container ul li');

window.addEventListener('scroll', () => {
    
    let current = '';

    sections.forEach( section => {

        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;

        if (pageYOffset >= sectionTop) {

            current = section.getAttribute('id');

        }
    });

    navLi.forEach( li => {

        if (pageYOffset <= 1710) {

            li.classList.remove('active-section');

            if( li.classList.contains(current) ) {
                li.classList.add('active-section');
            }

        } else {

            current = 'contact';
            li.classList.remove('active-section');

            if( li.classList.contains(current = 'contact') ) {
                li.classList.add('active-section');
            }
        }

    });

});


<!-- header.php -->

<nav id="nav" <?php echo (is_admin_bar_showing()) ? ' style="top: 32px;" ' : ''; ?>>

    <div class="container">

        <!-- hamburger menu -->
        <input type="checkbox" id="check">

        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>

        <!-- nav-logo -->
        <p id="logo">lf</p>

        <!-- nav links -->
        <?php
        
            //
            if( has_nav_menu( "port-nav-menu" )) {
                wp_nav_menu(array(
                    "theme_location" => "port-nav-menu",
                    "container" => ""
                ));
            }
        
        ?>

    </div>
</nav>

/* style.css */

nav {
    display: flex;
    position: fixed;
    text-transform: uppercase;
    top: 0%;
    width: 100%;
    z-index: 1;
}

nav a:link, nav a:visited {
    color: #ffffff;
    text-decoration: none;
}

nav .container ul li.active-section {
    background: #e31b6d;
}

nav a:hover {
    color: #e31b6d;
}

nav ul {
    display: flex;
    float: right;
    line-height: 50px;
    list-style-type: none;
    margin: auto;
}
LAF_OUT_LOUD
  • 43
  • 1
  • 7
  • Did u check if your js file is getting called on the wordpress page, cause u have to include it in you template file. – Pankaj Prajapati Jul 10 '21 at 05:05
  • What have you tried to enqueue your script, or include it in your theme somewhere? – A Haworth Jul 10 '21 at 08:00
  • @A Haworth Yes, I have enqueue the script in the functions.php file. The javascript works fine, UNTIL I try to play around w/ the menus. Before asking myself, there is a post on stackoverflow that says 'How to add active class to wp_nav_menu', and it recommends I simply add code to my functions.php file. But, nothing happens when I do that. [link](https://stackoverflow.com/questions/26789438/how-to-add-active-class-to-wp-nav-menu-current-menu-item-simple-way) – LAF_OUT_LOUD Jul 10 '21 at 14:11

0 Answers0