Here is the line of code I use to disable the top, or parent, links in a navigation menu in a WordPress site.
Insert this line of code into your header.php file, right before the closing <head> tag:
<script type="text/javascript">jQuery(function($) { $("li.page-item-7").children("a").attr('href', "javascript:void(0)");});</script>
Now, simply change the page-item-7 to the ID of the page that you wish to disable. If you want to disable more than one of the parent menu items, use this code:
<script type="text/javascript">
jQuery(function($) {
$("li.page-item-7,li.page-item-14,li.page-item-20,li.page-item-28").children("a").attr('href', "javascript:void(0)");
});
</script>
Let me know if you run into any issues or have any questions at all.
Hey Libby,
I’m trying to disable two of the parent links that have drop down menus, but I have to admit I’m a complete novice. I entered the code you developed into the header.php just as you had suggested, but my hang up is with the part where I edit the page ID to selectively disable specific parent links. Where do I find the proper page ID to enter into the code?
Thank you for your time.
Hi Kanon,
I completely understand! Thankfully, it is actually very simple to find your page IDs! Here is a link that you might find useful – http://www.techtrot.com/wordpress-page-id/. Basically when you hover your mouse cursor over the name of a page in your admin panel (when you go to Pages and see the list of your website’s pages), you will see the URL to that page in the browser (generally at the bottom left corner). You can also click a page title to edit that page and the page ID will be in the URL at the top of the page. Please let me know if that doesn’t make sense and I can try to explain it better.
Thanks!
Well I’ve located the page IDs which were 300 & 305.
http://rushrivermedia.com/hudson/wp-admin/post.php?post=300&action=edit
http://rushrivermedia.com/hudson/wp-admin/post.php?post=305&action=edit
I entered those values into the code:
jQuery(function($) {
$(“li.page-item-300,li.page-item-305″).children(“a”).attr(‘href’, “javascript:void(0)”);
});
jQuery(function($) { $(“li.page-item-300,li.page-item-305″).children(“a”).attr(‘href’, “javascript:void(0)”);});
But it didn’t work. Hmm. What am I missing? Thank you, by the way, for your help.
Ok, great, good job finding the page IDs.
My first thought is that in copying and pasting the code, perhaps some of the characters became formatted – sometimes copying and pasting codes can be tricky. I would try erasing and re-typing by hand all of the quote and the double quote characters in that block of code. When you pasted that code into your comment, the quotes and double quotes are formatted – so I am not sure if that is how they are in your template file too, which could be causing it to not work.
Please let me know if you do that and it still doesn’t fix the problem. Thanks!
Bummer. I retyped all of the single and double quote characters. Didn’t change anything.
Hmm, well I am not entirely sure why it is not working for you, but why don’t you try using this plugin – http://wordpress.org/extend/plugins/page-lists-plus/. I have used that before on one of my sites. Once you have the plugin installed and activated, go to Page Lists Plus under Settings in your admin panel sidebar. Scroll down to the section under Page-Specific Options, and check the box next to “Link (lets you unlink Pages without removing them from your Page lists)”.
Then, open each page that you want to disable the link in the menu to and under the box where you write the post content, uncheck the box next to this line:
If this box is checked, then this Page will be linked in lists generated using wp_list_pages().
Let me know if any of that does not make sense. I hope it solves your problem!
Weird, but that didn’t work either. Somebody mentioned I could add “#” to the page link and that would remedy the issue. Are you familiar with that tactic?
Hey,
My query is a little reverse engineering. You see the menu bar on my website does not display the sub-menu(s) only on the pages. It works fine on the posts but never the pages. I’ve done everything related to the theme but the answer seems to lie in the css. I’m using pagelines if that helps.
Hi,
The first thing I would do is check the post.php and page.php templates to see if there is any difference in the way that they call for the navigation menu. Once I looked into that, I would check the CSS as well and try to see why the sub-menus are only displaying on certain pages.
Please let me know if you can find where the difference is, and I can try to help you get the sub-menus working.
Thanks!
Hey,
Thanks for your reply! The day after I wrote to you, I went through the coding but couldn’t find the smoking gun. I went through my plugins again and it seemed to be a problem with a sharing plugin. Now I have made inserted the sharing code in my header and everything is good again.
Thanks again for trying to help me out!
Oh, I am really glad to hear you got it figured out! Thanks for letting me know.
How do I disable the child in the middle, but not the last?
parent->child->child
Please help
Hi Kay,
You would just add the page-item ID number for the child in the middle to the line of Javascript. Feel free to send me a link to your site and I can find the page-item ID for you if you’d like.
Thanks!
U’re the MAN!! I’ve been looking for a solution like this for days and I’ve tried many things, none of which worked!!
I took ur code, changed “page” to “cat” and managed to block links for parent categories on the nav menu!!
Cheers!!!
Haha, make that the “woMAN”
glad you were able to get it working, thanks for commenting!
Owwwww my mistake, sorry
So if u’re really the WOMAN, perhaps u can help me with this one: is there a way to hide the “javascript:void(0)” that shows up whenever I hover the mouse over the disabled parent category???
Never mind aswering, I found a way to do what I wanted and only now I’ve realized this thread is from 2011