How to add WordPress menu without link very easily

January 2, 2021Articles

Many a time, we find ourselves in a situation where we need to add a WordPress menu without link. One of the situations is when we want to add a dropdown menu. In this situation, we don’t want the parent menu item to go to any link or to navigate to any id. We just simply want to disable the default anchor link behavior and open the child menu items when someone clicks or hovers over the parent menu item.

Here is how to add a WordPress menu without link:

Add Menu without Link:

You will need to go to Appearance -> Menus from your WordPress admin panel. Find the Custom Links pane or accordion to the left side. If you can’t find it there, simply click on the Screen Options at the top right corner. Then checkmark the Custom Links option. The Custom Links pane will be displayed.

Fix Custom Links missing in WordPress menu

Fix Custom Links missing in WordPress menu

 

Now click on the Custom Links pane to expand it. Then add # in the URL field and menu text in the Link Text field. Then click on Add to Menu to add it to the menu area. You have successfully added the WordPress menu without link to your website.

The Pros and Cons:

It’s super easy to add the menu without link this way. But this type of menu without link comes with its cons.

For example, if we scroll down the page and click on the empty menu item ( if the header stays fixed even when you scroll ), the page will automatically scroll to the top. This may create confusion for the users because a menu without a link is not supposed to do this. This should simply do nothing as it’s a menu without a link.

 

There are two possible ways we can fix this non clickable menu scrolling.

Using Javascript:void(0) :

We can fix it by adding javascript:void(0) to the URL field in the menu item. The problem is WordPress doesn’t allow adding javascript:void(0) at the menu item URL field. But nothing to worry about! We can still fix this. Here is how:

You will need to simply open the functions.php file in your child theme or theme folder. Then add the below code at the end of the file. If you don’t know where to find the file, check our article how to edit functions.php file

// add javascript:void(0) to menu items with # url
add_filter('walker_nav_menu_start_el', 'mswa_replace_hash', 999);
function mswa_replace_hash($menu_item) {
    if (strpos($menu_item, 'href="#"') !== false) {
        $menu_item = str_replace('href="#"', 'href="javascript:void(0);"', $menu_item);
    }
    return $menu_item;
}

In the above code, we are searching for herf=”#” in the menu item anchor tag. Then replacing it with href=”javascript:void(0)”.

From now on, you can continue adding # to your menu item. The above code will automatically replace # with javascript:void(0) in the frontend.

Using CSS Only:

We can alter the default link behavior using CSS. For this, we will use pointer-events CSS property.

At first, we will attach a class in the menu item. Add, “menu-without-link” class in the CSS Classes field. If you can’t find the CSS Classes field, click on Screen Options button at the top right corner. Then checkmark CSS Classes to enable it.

Add class to menu item in WordPress

Add class to menu item in WordPress

 

When you are done adding the class, we need to add two lines of CSS code. Go to Appearance -> Customize -> Additional CSS. Then copy and paste the below CSS codes there.

.menu-without-link {
    cursor: default;
    pointer-events: none;
}

After doing this, the menu item should not redirect to any page or do anything. Here we have used default cursor. If you want, you can use different cursor pointers. You can see a full list of valid cursor pointer here at CSS Cursor Property

 

Conclusion:

Using the Javascript:void(0) method, you can simply add # to set a menu item as non clickable. And if you use the CSS only method which is easier to follow, you will need to add the menu-without-link class to each menu item that you don’t want to work as a link. Adding this class will remove the default anchor link behavior even if it has any valid link or URL specified.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Now to get 70% Off launch coupon!

MS Web Arts will be launching on 1st May 2021. You will get up to 70% off and the latest product updates when we launch. This is subscribers only. Don’t miss out!