Can't Click On Menu Links In Drop Down Menu

I'm working on a wordpress site with a mobile dropdown menu. The dropdown works fine but clicking on any link in the dropdown menu just closes the menu and doesn't go to the link.

Solution 1:

I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container.

But i am guessing that your wrapper is edgtf-mobile-menu-opener

However, you can target the wrapper that contains mobile menu list and the do something like this:

$(document).ready(function(){
    $(".edgtf-mobile-menu-opener").click(function(){
    $('.edgtf-mobile-nav').fadeToggle(2000)
});

fadeToggle will fade the menu in and it will stay until you click the menu-icon again

Just try that first and lets see

Well, clear the cache.

However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.

Solution 2:

Add this to the CSS. It's an issue with the theme framework itself it looks like. I had this issue myself and this worked as a fix.

.dropdown-backdrop{
position: static;
}

Solution 3:

That is most probably because you toggle (open/close) the navigation whenever you click on .edgtf-mobile-header.

Try to change the toggle selector to .edgtf-mobile-opener-icon-holder.

Solution 4:

Thanks to @Dayo-Greats answer I managed to work this out..kind of.

Here's the code that makes things work. But for some reason #anchortag menu links still don't work. Otherwise the links are now clickable. Any reason wy the anchor tags wouldn't work?

Here's my code:

(function($) {
$(document).ready(function(){
    $(".edgtf-mobile-menu-opener").click(function(){
    $('.edgtf-mobile-nav').fadeToggle(300);
 $('.edgtf-mobile-nav').css("display", "block");
 $('.edgtf-mobile-nav').css("height", "100px !important");

                    e.stopPropagation();
 // return;
});

      $(".edgtf-mobile-nav .edgtf-grid").click(function(e){

                    e.stopPropagation();
 // return;
});
});
})(jQuery); 

Solution 5:

I don't have a privilege to make a comment yet.

However, you did not pass the function argument(function()) before you called e.stopPropagation(); as seen below:

  (function($) {
    $(document).ready(function(){
     ....
    e.stopPropagation();

Quickly fix a bug in the your new code like this function(e)

  (function($) {
    $(document).ready(function(e){
     ....
     e.stopPropagation();

Try it again and lets see