Dropdown menu on mobile device will not open

I'm building a site by editing the code of the Adonis free theme (Catch Themes) in Wordpress. The main navigation is suppose to change in to a hamburger menu button at the specified break point (and it does), however the menu doesn't actually open. None of the class adds from jQuery functions are applied. When I manually apply them in chrome developer mode, they do open.

Link to site.

I've included the jQuery, CSS, and HTML. I've tried using the menu in a different location, and removing the css/php edits I made, to no avail.

Code:

/* Menu */
var body, masthead, menuToggle, siteNavigation, socialNavigation, siteHeaderMenu, resizeTimer;

function initMainNavigation( container )

// Add dropdown toggle that displays child menu items.
var dropdownToggle = $( '<button />', 'class': 'dropdown-toggle', 'aria-expanded': false )
.append( adonisScreenReaderText.icon )
.append( $( '<span />', 'class': 'screen-reader-text', text: adonisScreenReaderText.expand ) );

container.find( '.menu-item-has-children > a' ).after( dropdownToggle );

// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );

// Add menu items with submenus to aria-haspopup="true".
container.find( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );

container.find( '.dropdown-toggle' ).click( function( e )
var _this = $( this ),
screenReaderSpan = _this.find( '.screen-reader-text' );

e.preventDefault();
_this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );

// jscs:disable
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
// jscs:enable
screenReaderSpan.text( screenReaderSpan.text() === adonisScreenReaderText.expand ? adonisScreenReaderText.collapse : adonisScreenReaderText.expand );
);


initMainNavigation( $( '.main-navigation' ) );

masthead = $( '#masthead' );
menuToggle = masthead.find( '.menu-toggle' );
siteHeaderMenu = masthead.find( '#site-header-menu' );
siteNavigation = masthead.find( '#site-navigation' );
socialNavigation = masthead.find( '#social-navigation' );


// Enable menuToggle.
( function() {

// Adds our overlay div.
$( '.below-site-header' ).prepend( '<div class="overlay">' );

// Assume the initial scroll position is 0.
var scroll = 0;

// Return early if menuToggle is missing.
if ( ! menuToggle.length )
return;


// Add an initial values for the attribute.
menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
menuToggle.add( socialNavigation ).attr( 'aria-expanded', 'false' );

// Wait for a click on one of our menu toggles.
menuToggle.on( 'click.adonis', function()

// Assign this (the button that was clicked) to a variable.
var button = this;

// Gets the actual menu (parent of the button that was clicked).
var menu = $( this ).parents( '.menu-wrapper' );

// Remove selected classes from other menus.
$( '.menu-toggle' ).not( button ).removeClass( 'selected' );
$( '.menu-wrapper' ).not( menu ).removeClass( 'is-open' );

// Toggle the selected classes for this menu.
$( button ).toggleClass( 'selected' );
$( menu ).toggleClass( 'is-open' );

// Is the menu in an open state?
var is_open = $( menu ).hasClass( 'is-open' );

// If the menu is open and there wasn't a menu already open when clicking.
if ( is_open && ! jQuery( 'body' ).hasClass( 'menu-open' ) )

// Get the scroll position if we don't have one.
if ( 0 === scroll )
scroll = $( 'body' ).scrollTop();


// Add a custom body class.
$( 'body' ).addClass( 'menu-open' );

// If we're closing the menu.
else if ( ! is_open )

$( 'body' ).removeClass( 'menu-open' );
$( 'body' ).scrollTop( scroll );
scroll = 0;



);

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation ul
list-style: none;
margin: 0;
padding-left: 0;


.main-navigation li
margin: 0;
position: relative;


.menu-social-container
padding: 13px 15px;


.main-navigation a
display: block;
font-weight: 400;
line-height: 1.5;
text-decoration: none;


.main-navigation a,
.search-container
padding: 16px 30px;


.menu-inside-wrapper
-webkit-box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.2 );
-moz-box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.2 );
box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.2 );


.main-navigation
border: none;


.main-navigation ul ul a
font-size: 14px;
font-size: 0.875rem;


.main-navigation ul.toggled-on
box-shadow: none;


.main-navigation ul.toggled-on li:last-child
border-bottom: none;


.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul
left: 20px;


.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul
left: 100%;


.main-navigation ul ul .current_page_item > a,
.main-navigation ul ul .current-menu-item > a
font-weight: 600;


.main-navigation li.menu-item-has-children ul a
padding: 15px 50px 15px 40px;


.main-navigation li.menu-item-has-children ul ul a
padding-left: 50px;


.menu-wrapper
display: block;


#primary-menu-wrapper
float: left;


#social-search-wrapper
float: right;


.menu-inside-wrapper
display: none;
position: absolute;
width: 100%;
top: 100%;
z-index: 199;
right: 0;


#social-search-wrapper .menu-inside-wrapper
max-width: 360px;


.is-open .menu-inside-wrapper
display: block;


body.menu-open
overflow-y: scroll;
width: 100%;


.menu-toggle-wrapper
padding: 10px;


.menu-toggle
background-color: transparent;
border: none;
font-weight: 400;
line-height: 1.5;
padding: 10px 15px;


.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle.selected
border:none;


.selected.menu-toggle .icon-bars,
.menu-toggle .icon-close,
.selected.menu-toggle .icon-search
display: none;


.selected.menu-toggle .icon-close
display: inline-block;


#social-search-toggle .icon
margin-right: 0;


#social-search-wrapper .menu-toggle
-webkit-border-radius: 36px;
border-radius: 36px;
display: inline-block;
height: 36px;
padding: 0;
text-align: center;
width: 36px;


/* Dropdown Toggle */
.dropdown-toggle
background-color: transparent;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
font-size: 20px;
font-size: 1.25rem;
right: 0;
line-height: 1.5;
margin: 0 auto;
padding: 13px;
position: absolute;
text-shadow: none;
top: 0;


.dropdown-toggle:hover,
.dropdown-toggle:focus
border: 0;
background: transparent;


.dropdown-toggle:focus
outline: thin dotted;


.dropdown-toggle.toggled-on .icon
-ms-transform: rotate(-180deg); /* IE 9 */
-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
transform: rotate(-180deg);


.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon,
.main-navigation ul a > .icon
display: none;


.main-navigation ul ul
display: none;


.main-navigation ul .toggled-on
display: block;


#social-search-wrapper .menu-toggle-wrapper
float: left;
padding: 14px 20px;


.menu-label
display: inline-block;


.navigation-modern #social-search-wrapper .menu-inside-wrapper .social-navigation,
.navigation-classic .mobile-social-search
display: none;


<body class="home page-template-default page page-id-2 tribe-js tribe-bar-is-disabled fluid-layout navigation-classic absolute-header no-sidebar content-width-layout" <div="">
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

<header id="masthead" class="site-header">
<p><a href="2018test.proarte.org"><img style="float: left;" src="http://2018test.proarte.org/wp-content/uploads/2018/08/logo-red-whitewordmark-paco.png" width="250px"></a></p>
<div class="wrapper">
<div id="site-header-main">
<div id="site-header-menu" class="site-header-menu">
<div id="primary-menu-wrapper" class="menu-wrapper">
<div class="menu-toggle-wrapper">
<button id="primary-menu-toggle" class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><svg class="icon icon-bars" aria-hidden="true" role="img"> <use href="#icon-bars" xlink:href="#icon-bars"></use> </svg><svg class="icon icon-close" aria-hidden="true" role="img"> <use href="#icon-close" xlink:href="#icon-close"></use> </svg><span class="menu-label">Menu</span></button>
</div><!-- .menu-toggle-wrapper -->

<div class="menu-inside-wrapper">
<nav id="site-navigation" class="main-navigation custom-primary-menu" role="navigation" aria-label="Primary Menu">
<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="primary-menu"><li id="menu-item-368" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-368" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=10">About<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="http://2018test.proarte.org/?page_id=292">History</a></li>
</ul>
</li>
<li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-226" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=224">Season<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-697" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-697"><a href="http://2018test.proarte.org/?page_id=321">Season and Tickets</a></li>
<li id="menu-item-305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-305"><a href="http://2018test.proarte.org/?page_id=288">Subscribe</a></li>
<li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="http://2018test.proarte.org/?page_id=285">Salon Series</a></li>
</ul>
</li>
<li id="menu-item-494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-494" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=488">We Are Pro Arte<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="http://2018test.proarte.org/?page_id=294">Musicians</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301"><a href="http://2018test.proarte.org/?page_id=296">Staff and Board of Trustees</a></li>
</ul>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=14">Support<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="http://2018test.proarte.org/?page_id=290">Donate</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300"><a href="http://2018test.proarte.org/?page_id=298">Volunteer</a></li>
</ul>
</li>
</ul></div> </nav><!-- .main-navigation -->

0

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.