[mmhhmmParticipant]

Please look at the attached image. We need to inject a class attribute at the specified points in nav items, i. e. x.navbar … ul.x-nav > li.menu-item > a > span

In the attached screenshot, the <span> would then turn into <span class=”foo”>

We are using X 4.6.1 with a child theme but cannot find the function we need to override to achieve this.

(We cannot achieve our desired effect by targeting this element with CSS rules.)

Thanks!

[LelyModerator]

Hi There,

Please try adding the following code on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
   $('ul.x-nav > li.menu-item > a > span').addClass('foo');
});

Hope this helps.

[mmhhmmParticipant]

Thank you. This targets the correct element, but the class is added too late. Another plugin (which we cannot edit) needs to parse the classes, so adding the class as you suggested does not work.

Can you provide us with the location in X’s php code that creates this part of code? Maybe it’s possible to add something to the child theme’s functions.php that takes care of injecting the class attribute.

[DarshanaModerator]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Add the following code into your child theme’s functions.php file and replace the class name “my-special-class” according to your preference.

// Add class to Primary Menu Item
function x_output_primary_navigation() {

  if ( x_is_one_page_navigation() ) {

    wp_nav_menu( array(
      'menu'           => x_get_one_page_navigation_menu(),
      'theme_location' => 'primary',
      'container'      => false,
      'menu_class'     => 'x-nav x-nav-scrollspy',
      'link_before'    => '<span>',
      'link_after'     => '</span>'
    ) );

  } elseif ( has_nav_menu( 'primary' ) ) {

    wp_nav_menu( array(
      'theme_location' => 'primary',
      'container'      => false,
      'menu_class'     => 'x-nav',
      'link_before'    => '<span class="my-special-class">',
      'link_after'     => '</span>'
    ) );

  } else {

    echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';

  }

}

Hope that helps.

[mmhhmmParticipant]

Thank you, this works beautifully. 🙂

[LelyModerator]

You’re welcome!

Cheers!

[Author]

Posts