It seems simple enough right?  You’ve been developing web pages for years and you never even thought twice about accounting for parent pages being links.  You simply coded them as list items but not links.  In WordPress…this kinda becomes an issue because of the way menus are created.  Here’s the problem…let’s say you want a top nav item titled “Services” and then you want a few sub-pages under it like WordPress Design and Responsive Design.  You can do that no problem, but there’s a catch.  The “Services” menu item is going to be a link and it’s going to link to a page.  Great Odin’s Raven, what are you going to do?  You are going to use jQuery to replace the href attribute with a harmless “#” that will unlink the menu item.  At at that point you’ll be a WordPress hero.  Here’s how:

1.  You will need jQuery to be called in the header.php file.  To do this simply copy and paste the following script:

<script src=”//code.jquery.com/jquery-1.10.2.js”></script>

Make sure you put it right above the <?php wp_head(); ?> hook.  Okay, still with me?  Let’s move on!

2.   Next you have to locate the menu item so you can target it with the jQuery.  For WordPress you can use the following script to target a list item that has children:

<script>$( “li.menu-item-has-children>a:first-child” ).attr(“href”, “#”)</script>

You will need to place that right above the following line of code:

<?php wp_footer(); ?>

3.  So that takes care of the actual link BUT when you hover over the menu item it is still going to appear like a hyperlink.  Into the style.css file we go! Place the following code into the style.css file to change the pointer cursor to a plain old arrow:

li.menu-item-has-children>a:first-child {cursor:default;}

4.  Pat yourself on the back and enjoy your linkless parent pages in the nav menu!