Can’t assign JS variable to wp_nav_menu items


I’m using wp_nav_menu to load a WordPress menu as follows:

                        'theme_location' => 'menu-1',
                        // 'menu_id'        => 'primary-menu',
                        // 'menu_class'  => 'menu-desktop',
                        'items_wrap' => '<ul id="primary-menu" class="menu-desktop">%3$s <li class="toggle-search"><i class="material-icons search-toggle-icon">search</i><div class="nav-search"><form role="search" method="get" id="searchform" action="'.home_url( '/' ).'"><input type="text" value="Search KILJ" name="s" id="s" /><button type="submit" id="searchsubmit"><i class="material-icons">search</i></button></form></div></li</ul>',

I’ve tried assigning a javascript variable to the ‘search-toggle-icon’ and ‘nav-search’ classes, and using those variables to toggle visibility. Doing this doesn’t work. If I don’t use JS variables and just reference the css classes ‘search-toggle-icon’ and ‘nav-search’, the js show/hide works, but if I create variables and try using js variables to do the show/hide, it doesn’t work.

Here is my javascript code that doesn’t work due to using variables for the two classes (searh-toggle-icon & nav-search). If I switch all references to these variables to just be the class name, everything works great.

'use strict';

    var navSearchBox = document.querySelector('.nav-search');
    var searchIcon = document.querySelector('.search-toggle-icon');

    var isNavMobile = window.matchMedia( '(max-width: 1060px)' );

    // Define a callback function for the event listener.
    function handleNavMediaQueryChange( e ) {

        if ( e.matches ) {
            //show nav search on mobile
            $( navSearchBox ).show();
            $( navSearchBox ).attr( 'aria-expanded', 'true' );
            $( navSearchBox ).attr( 'aria-hidden', 'false' );
        } else {
            //hide nav search on desktop
            $( navSearchBox ).hide();
            $( navSearchBox ).attr( 'aria-expanded', 'false' );
            $( navSearchBox ).attr( 'aria-hidden', 'true' );
            $( searchIcon ).off( 'click' ).on( 'click', function(){
                var iconText = $(".nav-search").is(':visible') ? 'search' : 'close';
                $( navSearchBox ).slideToggle();
                $( navSearchBox ).attr( 'aria-hidden', $( '.nav-search' ).attr( 'aria-hidden' ) === 'false' ? 'true' : 'false' );

    // Run the isNavMobile change handler once.
    handleNavMediaQueryChange( isNavMobile );

    // Add the callback function as a listener to the query list.
    isNavMobile.addEventListener( 'change', handleNavMediaQueryChange );


I have tried testing js variable creation and doing things with those variables for items on my page that are NOT part of the WP_NAV_MENU and they work great.

Is there something about wp_nav_menu that makes JS variables not work well? Do I need to do something more to require the page to be loaded and ready before using those variables? Interestingly, if I console.log those variables, the succesfully show me the correct node, but executing the JS (show/hide,etc) doesn’t work.

stemlund 2 years 2020-10-22T14:10:21-05:00 0 Answers 15 views 0

Leave an answer