I am trying to dim my page when hovering over the menu. I am using ubermenu (mega menu) for the navigational menu, and also using the X theme on Wordpress.
I have added a CSS class to add a darkened background to the page. In addition, I added a piece of code to dim the page when hovering over one of the tabs for the mega menu(in this example, #menu-item-443 is the ID for one tab).
When I try testing the code out, it doesn't work at all. I tried adding it to the Cornerstone visual editor and it works within the editor, but then won't work on the actual page.
What could be the issue with why the code isn't applying to the pages?
Any help would be appreciated!
CSS code to darken the page:
.dim{
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
display: none;
}
Code to dim the page:
$('#menu-item-443').hover(function(){
$('.dim').fadeTo(200, 1);
}, function(){
$('.dim').fadeTo(200, 0, function(){
$(this).hide();
});
});