If a site does note have content on its parent menu items (pages) but does have subs that need to be opened, you can use the below replacement code instead of the default code in our theme.  This replacement code provides no link on the parent, but instead just activates the parent's drop down. On the other hand, the default code in our theme assumes there IS content on the parent AND the parent must open a drop down. The default theme puts a separate link in an arrow to the right of the menu item, leaving the parent clickable to its content.

Also, be sure to replace the CSS code farther down the page


REPLACE THIS JAVASCRIPT IN THEME JS FILE
-----------------------------------------------------------------

// MOBILE NAV SETUP > Toggle submenus (with both link content and dropdown activator on Parent) script begins*/

$( ".mobileNav ul li.menu-item-has-children > a" ).after( '<a href="#" class="dropDownActivator"></a>' );
	/*Inject a class after any menu item that has children.  This way, parent can have link content, while drop down appears as arrow to the right of the parent. Note that the ">" MUST be in above or drop downs only expand, they don't collapse (who knows why).  It seems that the "position: absolute" put on "dropDownActivator" is complicit in this problem.  But a correct layout becomes impossible if position is not set to absolute on dropDownActivator*/
	
$(".mobileNav ul li.menu-item-has-children a.dropDownActivator").click(function () {
            event.preventDefault();
	         $(this).toggleClass("OpenCloseToggle");
             $(this).next('ul.sub-menu').toggle("slow");
});

// MOBILE NAV SETUP > Toggle submenus (with both link content and dropdown activator on Parent) script ends*/

------------------------------------------------------------------


WITH THIS JAVASCRIPT

------------------------------------------------------------------

//MOBILE NAV SETUP > script for activating drop down when their parent pages have no content (don't need a link) begins 

$(".mobileNav > ul > li.menu-item-has-children > a").click(function () {
            event.preventDefault();
            $(this).next('ul.sub-menu').toggle("slow");
            $(this).toggleClass("OpenCloseToggle");
});
    
$(".mobileNav ul li.menu-item-has-children ul.sub-menu li.menu-item-has-children > a").click(function () {
            event.preventDefault();
            $(this).next('ul.sub-menu').toggle("slow");
            $(this).toggleClass("OpenCloseToggle");
});

//MOBILE NAV SETUP > script for activating drop down when their parent pages have no content (don't need a link) begins 

-----------------------------------------------------------------



REPLACE THIS CSS IN DEFAULT THEME STYLE:

----------------------------------------------------------------

a.dropDownActivator{
	position: absolute;
    top: 0px;
    right: 0px;
    padding: 30px !important;
    border: 1px solid grey;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children a.dropDownActivator:after{
	content: "▼";
	transform: rotate(0deg);
	display: block;
	transition: 500ms ease transform;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children > a.OpenCloseToggle:after{
    transform: rotate(180deg);
  }
  
------------------------------------------------------------------

WITH THIS CSS:

------------------------------------------------------------------
  
  .header .mobileNavWrapper .mobileNav ul li.menu-item-has-children > a:after {
    content: "▼";
    position: absolute;
    color: rgba(117, 112, 112, 0.7);
    right: 30px;
    transform: rotate(0deg);
    transition: 500ms ease transform;
 }

.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children > a.OpenCloseToggle:after{
    transform: rotate(180deg);
}

----------------------------------------------------------------------