How to add custom class to wordpress menu <a> tag

admin

Administrator
Staff member
I'm creating a wordpress website from scratch and I have problem with page scroll to anchor. I'm using Bootstrap Nav Walker module for it, how should I add my
Code:
.page-scroll
class to my menu item
Code:
&lt;a&gt;
?

Here is my header.php menu:

Code:
&lt;nav class="navbar navbar-custom navbar-fixed-top" role="navigation"&gt;
        &lt;div class="container"&gt;
            &lt;div class="navbar-header page-scroll"&gt;
                &lt;button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target=".navbar-main-collapse"&gt;
                    &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" href="#page-top"&gt;
                  &lt;img id="#page-top" src="&lt;?php echo get_template_directory_uri(); ?&gt;/images/logo3.png" alt="Brand logo"&gt;
                &lt;/a&gt;
            &lt;/div&gt;

            &lt;?php
              wp_nav_menu( array(
                  'menu'              =&gt; 'primary',
                  'theme_location'    =&gt; 'primary',
                  'depth'             =&gt; 2,
                  'container'         =&gt; 'div',
                  'container_class'   =&gt; 'collapse navbar-collapse navbar-right navbar-main-collapse',
                  'container_id'      =&gt; 'bs-example-navbar-collapse-1',
                  'menu_class'        =&gt; 'nav navbar-nav',
                  'fallback_cb'       =&gt; 'wp_bootstrap_navwalker::fallback',
                  'walker'            =&gt; new wp_bootstrap_navwalker())
              );
          ?&gt;

            &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
        &lt;/div&gt;
        &lt;!-- /.container --&gt;
    &lt;/nav&gt;

This is my js:

Code:
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        var $anchor_scroll = $($anchor.attr('href')).offset().top;
        var $anchor_scroll_calc = $anchor_scroll;
        $('html, body').stop().animate({
            scrollTop: $anchor_scroll_calc
        }, 1500);
        event.preventDefault();
    });
});

Here is my wordpress menu item:

<a href=" " rel="nofollow noreferrer"><img src=" " alt="Here is my wordpress menu item"></a>