Can't click on menu links in drop down menu

Question

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.

I can't find the JS code for this functionality so is there any code I can add to make sure clicking on any menu item within the menu div won't close the menu?

Below is the html. Here's the site: www.nomad8.com

  <header class="edgtf-mobile-header">
    <div class="edgtf-mobile-header-inner">
                <div class="edgtf-mobile-header-holder">
            <div class="edgtf-grid">
                <div class="edgtf-vertical-align-containers">
                                            <div class="edgtf-mobile-menu-opener">
                            <a href="javascript:void(0)">
                    <span class="edgtf-mobile-opener-icon-holder">
                        <i class="edgtf-icon-font-awesome fa fa-bars " ></i>                    </span>
                            </a>
                        </div>

                    </div>
                </div> 
            </div>
        </div>

<nav class="edgtf-mobile-nav">
    <div class="edgtf-grid">
        <ul id="menu-production-1" class=""><li id="mobile-menu-item-5597" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home edgtf-active-item"><a href="http://mysite/about" class=" current "><span>menuiteams</span></a></li></span></a></li>
</ul>    
</div>
</nav>

    </div>
</header>

UPDATE:

I've added this code to the header and it kind of works. But the anchor tags don't work all the time. Only on the first click:

(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();

});

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

                    e.stopPropagation();

});
         $('.edgtf-mobile-nav > li').click(function(){


   $('.edgtf-mobile-nav').fadeIn('fast');
        });

});
})(jQuery);

I'm using firefox and menu's in your site are navigating to the link. — 11thdimension, Sep 11 '16 at 04:35
@11thdimension it seems to happen only on mobile size screen. Its happening on both firefox and chrome here. — cjmling, Sep 11 '16 at 04:39

Dayo Greats · Answer 1 · 2016-09-11T20:08:24.930

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.

edited Sep 11 '16 at 20:08

answered Sep 11 '16 at 04:43

Dayo Greats

25
10

yeah i'm having caching issues. i think your code was missing a } ? just waiting for it to update – thomas jaunism Sep 11 '16 at 05:40
Thanks. That fades the menu in. But it closes the menu automatically as soon as it has faded in. – thomas jaunism Sep 11 '16 at 06:26
See my answer below. Not perfect. – thomas jaunism Sep 12 '16 at 02:14

score 0 · Answer 2 · answered Sep 11 '16 at 04:41

0

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;
}

answered Sep 11 '16 at 04:41

Zedkay22

434
5
13

score 0 · Answer 3 · answered Sep 11 '16 at 04:46

0

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.

answered Sep 11 '16 at 04:46

cephei_vv

220
3
14

score 0 · Answer 4 · answered Sep 11 '16 at 07:29

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);

score 0 · Answer 5 · answered Sep 12 '16 at 18:29

0

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

answered Sep 12 '16 at 18:29

Dayo Greats

25
10

Adding this just makes the menu disappear directly after opening it. Not sure why – thomas jaunism Sep 15 '16 at 05:50

score 0 · Answer 6 · answered Sep 12 '16 at 19:24

At the same time, i am thinking you can use another approach that shows the menu again, even when you clicked on the menu li element like this:

....

  $(".edgtf-mobile-menu-opener").click(function(){
  $('.edgtf-mobile-nav').fadeToggle('slow', function(){

   #-> trying to target ul>li 
   $('.edgtf-mobile-nav > li').click(function(){

   #-> and when clicked ('.edgtf-mobile-nav > li') then show menu again
   $('.edgtf-mobile-nav').fadeIn('fast');
        })

...just thinking anyway

Thanks! I've implemented this as per above. The anchor tag only works on the first click? — thomas jaunism, Sep 15 '16 at 05:54

Can't click on menu links in drop down menu

6 Answers6

Linked