I'm using WordPress Twenty Sixteen theme. Now I've a menu item named Product and it has a sub menu. The product page has a permalink as usual, but I want to remove it i.e., when I click on this menu item, it shouldn't perform any action, just like clicking on a text. However, it should not lose its hover color while doing so.

I found a solution pointer-events: none, but it removes the hover color. I don't want to use JavaScript/jQuery.

Is there any other solution?

  • Making a menu item that links to # will cause the link going nowhere.
    – cjbj
    Jun 17 '16 at 16:52
  • It will lead the user to top of the page.
    – Vikas
    Jun 17 '16 at 17:41

If you want to do this with PHP then use a custom walker and targeting the menu directly (if is menu item xxx), but jQuery will do this easily for you using removeAttr

$("#menu-item-xxx"). removeAttr("href");

That won't remove the tag, just removes the href="" from the tag.

  • It'll be really better to do that in PHP instead of JS... In JS Google will follow the link of the deactivated page!
    – shulard
    Jun 17 '16 at 17:16

Personnaly, I prefer use filters to manipulate data before menu generation.

Example with wp_setup_nav_menu_item:

add_filter('wp_setup_nav_menu_item', function($menu) {
    $menu->url = "";
    return $menu;

This filter is ran on each retrieved menu item but without nowing which menu is currently processed.

Another example with wp_get_nav_menu_items :

add_filter('wp_get_nav_menu_items', function($items, $menu) {
    if( $menu->slug === 'menu-principal' ) {
        foreach ($items as &$item) {
            if ($item->ID === 'MY-PRODUCT-PAGE-ID') {
                $item->url = "";
    return $items;
}, 10, 2);

This other filter is ran after all the menu items have been retrieved. You can also access the current menu Term details in the $menu variable (be sure to give 2 as the latest add_filter argument to retrieve menu details).

The default "walker" take care of the url property value to adapt HTML structure and behaviour. I think it can solve your problem.


How about just go to the menu from wp-admin remove product menu(i.e the current one) now create a new menu (Product)using Custom Menu and put url to # and add ur sub menus, if u have different class for current menu u can add custom class too follow these steps In Appearance > Menus, click the Screen Options tab. Under Show advanced menu properties, check CSS Classes. Now expand any menu item to reveal the CSS Classes (optional) text input


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.