Manipulate Wordpress Menu href attribute on custom template

Question

I have a custom template in which i am calling wp_nav_menu function like below.

<?php
  $defaults = array(
  'theme_location' => 'header-menu',
  'menu' => '',
  'container' => 'nav',
  'container_class' => 'main-nav',
  'container_id' => '',
  'menu_class' => 'nav',
  'menu_id' => 'sub-nav',
  'echo' => true,
  'fallback_cb' => 'wp_page_menu',
  'before' => '',
  'after' => '',
  'link_before' => '',
  'link_after' => '',
  'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  'depth' => 0,
  'walker' => new Nav_Walker_Nav_Menu()
);
  wp_nav_menu($defaults);

The output i am receiving is like

<a href="#about" class="nav-link">About</a>

When hoveing over the link i get the following url:

http://localhost/mysite/cart/#about

I want to remove cart/ from this url so that i will get the url

http://localhost/mysite/#about

Answer 1

In the dashboard, if you put #about as the link destination, it will create the link like you have which will take you as an anchor link to #about on any page it's displayed on (cart, whatever). If you want the link to be http://localhost/mysite/#about , you need to enter that full url in the menu link in the dashboard.

Just remember to change it when you take the site live.