Add class to wp_nav_menu

Question

I'm trying to insert the below class into a wp_nav_menu. The class goes inside the <li> elements.

\<div class="menu-overlay__item-wrapper split-text" data-split-text-type="lines"\>.

I can get the first part to apply (menu-overlay__item-wrapper) but not the second part with the split text animation (data-split-text-type="lines").

The Custom Walker

class WP_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='menu-overlay__item-wrapper split-text js-split-text data-split-text-type= lines><ul class='sub-menu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

And the wp_nav_menu

      \<?php
      wp_nav_menu( array(
      'menu'              =\> 'primary', // match name to yours
      'theme_location'    =\> 'primary',
      'menu_class'        =\> 'menu-overlay js-menu-overlay',
      'fallback_cb'       =\> false,
      'container'         =\> false,
      'items_wrap'        =\> '%3$s',
      'walker' =\> new WP_Walker
      ));
      ?\>

Looking at your code you aren't properly closing the attributes. You didn't close your class attribute. I'm assuming all the backslashes in your wp_nav_menu is from a copy and paste and not in your actual code. — disinfor, May 22 '23 at 16:02
My bad for posting it without the closing '. In my code it is closed but it doen't work. — Fay Kay, May 22 '23 at 18:06
The problem i think is the way i'm putting the code because the second part (data-split-text-type="lines") outputs like it is just part of the first class. — Fay Kay, May 22 '23 at 18:15
Yeah, this should be like this `$output .= "\n$indent
\n";` You aren't closing your class. The nav walker outputs the string you give it. — disinfor, May 22 '23 at 18:56

Add class to wp_nav_menu

0 Answers0