Title: JQuery code execution timing changes, WP 6.7, Navigation Block
Last modified: November 25, 2024

---

# JQuery code execution timing changes, WP 6.7, Navigation Block

 *  [mikednz](https://wordpress.org/support/users/mikednz/)
 * (@mikednz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/)
 * Before WP 6.7 I have a standard navigation block with an item with a sub menu.
 * I then had a group block with more content. I had some jquery that moved the 
   group into the submenu so I could have a nice mega menu and you can see it here:
 * When WP 6.7 came out my Jquery would run but it seems the nav was not rendered
   yet so the group was being moved but the JS couldn’t find the dropdown menu, 
   or any part of the menu.
 * The only fix I could use was to wrap the jquery with a setTimeout function set
   to run after 500ms or so.
 * Is there a best practise for enqueuing a script to run after the dom is created
   in WP 6.7? This is my working code. I didn’t need the setTimeout function before
   WP 6.7.
 *     ```wp-block-code
        setTimeout(function () {// Find the parent div with class .c-mega-menu and its child ul with class .wp-block-woocommerce-product-categoriesvar container = $('.c-mega-menu .wp-block-woocommerce-product-categories');// Find the link with rel="shop"var $link = $("a[rel='shop']");// Find the parent <li> elementvar $li = $link.closest("li");$($li).addClass('js-mega-menu-container');// Find the <ul> element within the parent <li>var $ul = $li.find("ul");// Find the <li> element within the <ul>var $liToRemove = $ul.find("li");// Remove the content from the <li>$liToRemove.empty();// Find the div with class "c-mega-menu" from elsewhere in the DOMvar $megaMenu = $(".c-mega-menu");// Append the megaMenu to the parent <li>$liToRemove.append($megaMenu);// Define a recursive function to add classes to li elementsfunction addClassesToLi(li) {  // Find the first a tag within the current li  var firstAnchor = li.find('a:first');  // Check if a first a tag was found  if (firstAnchor.length > 0) {    // Get the text content of the first a tag    var spanText = firstAnchor.text().trim();    // Add the spanText as a class to the current li    li.addClass(spanText);  }  // Recursively process child li elements  li.find('li').each(function () {    addClassesToLi($(this));  });}// Start the process with top-level li elementscontainer.find('li').each(function () {  addClassesToLi($(this));});  function updateLeftPosition() {    var viewportWidth = $(window).width();    // Check if the viewport width is greater than or equal to 1120px    if (viewportWidth >= 1120) {      var $shopLink = $('a[rel="shop"]');      var $megaMenuContainer = $('.js-mega-menu-container > ul');      var leftDistance = $shopLink.offset().left;      // Calculate the left position based on the distance from the left edge of the screen      $megaMenuContainer.css('left', -leftDistance + 'px');    } else {        var $megaMenuContainer = $('.js-mega-menu-container > ul');        $megaMenuContainer.css('left','0px');    }  }  // Initial calculation  updateLeftPosition();  // Update the left position when the screen width changes  $(window).on('resize', function() {    updateLeftPosition();  });   }, 500); // Adjust the delay if needed
       ```
   
    -  This topic was modified 1 year, 6 months ago by [mikednz](https://wordpress.org/support/users/mikednz/).
    -  This topic was modified 1 year, 6 months ago by [James Huff](https://wordpress.org/support/users/macmanx/).
      Reason: redundant link removed
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fjquery-code-execution-timing-changes-wp-6-7-navigation-block%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Jonathan Bossenger](https://wordpress.org/support/users/psykro/)
 * (@psykro)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18158698)
 * Hey [@mikednz](https://wordpress.org/support/users/mikednz/)
 * Could I check, how are you currently enqueuing the script file that includes 
   the JavaScript? This sounds to me like you are enqueing the script file before
   the menu is being rendered on the front end.
 *  Thread Starter [mikednz](https://wordpress.org/support/users/mikednz/)
 * (@mikednz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18160189)
 * Thanks for replying [@psykro](https://wordpress.org/support/users/psykro/) here
   is my code in functions.php
 *     ```wp-block-code
       add_action('wp_enqueue_scripts', 'dj_enqueue_custom_js');function dj_enqueue_custom_js() {    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts.js',     array(), false, true);}
       ```
   
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18160191)
 * If you wrap you code in `$(document).ready( /* your function here */ );`, the
   nav elements should all be rendered before your code executes.
 * You can also enqueue your script with the `['in_footer' => true,]` arg so your
   code is loaded in the footer.
 *  Thread Starter [mikednz](https://wordpress.org/support/users/mikednz/)
 * (@mikednz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18160216)
 * yes all jquery code is wrapped in `$(document).ready( /* your function here */);`
   and in footer I think is set to true in my enqueue block above
 *  [Jonathan Bossenger](https://wordpress.org/support/users/psykro/)
 * (@psykro)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18161066)
 * I noticed that you’re working with some WooCommerce elements. I wonder if this
   is a WooCommerce related thing?
 * Are you able to replicate the set up with a vanilla WordPress install, no other
   plugins or themes?
    -  This reply was modified 1 year, 6 months ago by [Jonathan Bossenger](https://wordpress.org/support/users/psykro/).
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18162818)
 * If your code cannot find nav elements even though it uses `.ready()`, that indicates
   the nav elements themselves are dynamically generated via other JS. If that is
   the case, I think you may have to override the nav generation code so that your
   code can be called after it’s finished doing its thing.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘JQuery code execution timing changes, WP 6.7, Navigation Block’ is closed
to new replies.

## Tags

 * [fse](https://wordpress.org/support/topic-tag/fse/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 6 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [1 year, 6 months ago](https://wordpress.org/support/topic/jquery-code-execution-timing-changes-wp-6-7-navigation-block/#post-18162818)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics