Navigation Not Working After Shrinking Down To Mobile?

[juztin]

Hello everyone. I'm having a little bit of trouble with my navigation. It works fine on desktop view, but once you shrink it down to tablet or mobile view, the links become unresponsive. You can click them, but they don't do anything, and you can tell the links are still there because you can right click and open them in a new window/tab.

Here's the code: codepen

If anyone can help with this, I would appreciate it very much! Its for my employer and I'm having a terrible time trying to figure out why the links work in one situation but not in another.

Thanks again.

[sasha_bolcina]

$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
// ------>>> PROBLEM e.preventDefault();
$(this).parent("li").toggleClass("hover");
});

when browser is downsized 767, you are blocking click event on href, as submenu has the same class name as its parent (a.parent). Either remove event preventDefault, or change the class name of your submenu.

[juztin]

$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
// ------>>> PROBLEM e.preventDefault();
$(this).parent("li").toggleClass("hover");
});

when browser is downsized 767, you are blocking click event on href, as submenu has the same class name as its parent (a.parent). Either remove event preventDefault, or change the class name of your submenu.

Deleting this line worked perfectly! I can't believe it was that simple haha. Thank you so much!

Another quick question, probably another simple one: When I shrink the nav down to mobile, there are little red notches in the right side of the navigation under Rubber Stamps and Accessories submenus. Do you know how I can prevent this from happening? The menu is supposed to be an off-yellow with a red border, but those notches shouldn't be there