how can i prepare menu (arrays) for this code - wordpress

Question

I am learning wordpress together with bootstrap and i don't kno how to prepare menu for following code :
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
<li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 1</a></li> <li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 2</a></li>
<li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 3</a></li>
<li class="nav-item"><a class="nav-link link text-black display-4" href="">Item 4</a></li>
</ul> </div>
for this code i am using
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu(
array(
'menu' => 'primarym',
'container' => 'ul',
'container_class' => 'navbar-nav nav-dropdown nav-right',
'menu_class' => 'menu',
'menu_id' => 'primary-menu',
'echo' => true,
)
); ?>
</div>
which is not working in my templates, can anyone help me.

Answer 1

No need to create custom walker. Just use additional argument and set the filters for nav_menu_css_class and nav_menu_link_attributes.
Please check below which help you.
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu(
array(
'menu' => 'primarym',
'container' => 'ul',
'container_class' => '',
'menu_class' => 'navbar-nav nav-dropdown nav-right',
'menu_id' => 'primary-menu',
'add_li_class' => 'nav-item',
'echo' => true,
)
); ?>
</div>
Notice the new 'add_li_class' argument.
And set the filters on functions.php
function add_additional_class_in_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_in_li', 1, 3);
function add_additional_class_in_ancher($atts) {
$atts['class'] = "nav-link link text-black display-4";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_additional_class_in_ancher');

Answer 2

You're close with your function, just keep in mind that container is for the menu's container (in your case, the div tag) and menu is for the menu itself (in your case, the ul tag).
For those two elements, you'll have to set your arguments to:
wp_nav_menu(
array(
'menu' => 'primarym', // or the id of the menu (you could otherwise use theme_location)
'container' => 'div',
'container_id' => 'navbarSupportedContent',
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'navbar-nav nav-dropdown nav-right',
'items_wrap' => '<ul class="%2$s" data-app-modern-menu="true">%3$s</ul>',
'walker' => new My_Walker(),
)
);
You'll notice that there's a new walker argument, without which you won't be able to display the menu element itself (li and a tags) the way you want.
A walker is a core class used to implement an HTML list of nav menu items and here's how you could use it for your example :
class My_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth, $args ) {
}
function start_el( &$output, $item, $depth, $args ) {
// $output : var returned at the end of the walker
// $item : information about the current item
$output .= sprintf(
'<li class="nav-item"><a class="nav-link link text-black display-4" href="%1$s">%2$s',
$item->url,
$item->title
);
}
function end_el( &$output, $item, $depth, $args ) {
// $output : var returned at the end of the walker
$output .= '</a></li>';
}
function end_lvl( &$output, $depth, $args ) {
}
}