Clicking on the top level within a multi-level menu will open the corresponding page. But maybe you don't want clicking the top level menu item to go anywhere. Instead, you just want the parent page to act as a way to group to the child pages under it. Here, we will provide a way for making any menu item do nothing when clicked (i.e. the link goes nowhere).
The parent page can still be accessed using a breadcrumbs gadget. If you don't want it to be, you could redirect the parent page to your home page or one of the child pages.
Making a single menu item not clickable
To make a single menu item not clickable, follow these steps:
- Go to the Website module (by clicking the Website menu) then click the Settings option.
- Within the Settings screen, click Global JavaScript (under Site settings).
- Paste the following script in the code box (if there are other scripts already in there be sure not to overwrite any of it):
<script> function removeLinks(links) { if (!arguments[0]) return; var a = arguments[0]; $(".WaGadgetMenuHorizontal a:not(.wa-authenticateLoginLink), .WaGadgetMenuVertical a:not(.wa-authenticateLoginLink),.WaGadgetMobilePanel a:not(.wa-authenticateLoginLink)").each(function() { var curhref=$(this).attr('href').split("/")[3]; if ( (typeof(a)=='string' && a==curhref)|| (typeof(a)=='object' && ($.inArray(curhref, a)>-1)) ) { $(this).attr("href", "javascript:void(0)").css("cursor","context-menu"); } }); } removeLinks("pageURL"); </script>
- In the code above, in the second line from the bottom, replace pageURL with the page URL of the page – e.g.
removeLinks("page-1591795")
You can find the page URL within the page settings. - Click the Save button to save your changes.
Making multiple menu items not clickable
To make multiple menu items not clickable, follow these steps:
- Go to the Settings page and click Global JavaScript(under Site settings) then paste the following script in the code box (if there are other scripts already in there be sure not to overwrite any of it):
<script> function removeLinks(links) { if (!arguments[0]) return; var a = arguments[0]; $(".WaGadgetMenuHorizontal a:not(.wa-authenticateLoginLink), .WaGadgetMenuVertical a:not(.wa-authenticateLoginLink),.WaGadgetMobilePanel a:not(.wa-authenticateLoginLink)").each(function() { var curhref=$(this).attr('href').split("/")[3]; if ( (typeof(a)=='string' && a==curhref)|| (typeof(a)=='object' && ($.inArray(curhref, a)>-1)) ) { $(this).attr("href", "javascript:void(0)").css("cursor","context-menu"); } }); } removeLinks(["pageURLArray"]); </script>
- In the code above, in the second line from the bottom, replace pageURLarray with a list of page URLs within quotation marks and separated by commas – e.g.
removeLinks(["Scholarship-and-Grants", "Fundraisers", "Join", "Events"])
You can find the page URL within the page settings. - Click the Save button to save your changes.
Troubleshooting
If the code you have inserted doesn't work, check to make sure that the quotation marks appearing in the code are straight quotation marks – " " – rather than curved or curly (aka smart) quotation marks – “ ”. Some word processors including Microsoft Word and Google Docs automatically convert straight quotation marks to curly ones.