Could someone help me figure out why this code isn't functioning as expected?
HTML
<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="header_meta" class="container_wrap container_wrap_meta">
<div id="header_main" class="container_wrap container_wrap_logo">
<div id="header_main_alternate" class="container_wrap">
<div class="container">
<nav class="main_menu" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" data-selectname="Select a page">
<div id="megaMenu-sticky-wrapper">
<div id="megaMenu" class="megaMenuContainer megaMenuHorizontal wpmega-preset-vanilla megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnClick megaFullWidth wpmega-noconflict megaMinimizeResiduals themeloc-avia megaMenu-withjs">
<div id="megaMenuToggle" class="megaMenuToggle">
<ul id="megaUber" class="megaMenu">
<li id="menu-item-8" class="jrm-um-sticky-only menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
<li id="menu-item-1459" class="my_custom_class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter">
<a href="#">
CSS
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
display: none;
}
JS
$(document).ready(function() {
$('.my_custom_class').click(function() {
$('#overlay-2').toggle();
});
});
I'm aiming for the #overlay-2 to be hidden on page load and then toggle show/hide when using the menu button with the custom class assigned in WordPress nav menu "css classes" metabox. The class I applied is .my_custom_class.
What could possibly be causing this not to work? If you're able to provide corrected code, that would be greatly appreciated :)
Thank you!