Mobile menu not working in Firefox

**wehttamrd** · 03-22-2016, 01:37 PM

The site with the issue: ReputationDefender | The online reputation management leader

I have a responsive site where the mobile menu is not working correctly in Firefox. You click the hamburger icon and the menu shows up, then you click a section and it opens up a list of links. When you click one of those links, the menu closes and the link goes nowhere. This issue is only happening in Firefox. I believe the return false; in the following javascript code is the cause of the problem. How can I have the return false only target the 3 initial links and not the nested ones? Any direction would be appreciated. Thank you.

Code:

$('ul#main-menu > li.has-dropdown').on('click','', // dropdown-multilevel
    function(e){
      var $clicked = $(e.srcElement);
      if($clicked.parent().hasClass('leaf')){
        return true;
      }
      // if there is a hamburger menu, breakpoints for mobile & tablet
      if($(window).width() < 1024){
        var $target = $(this).find('ul.dropdown').first();
        var $link = $(this).find('a,label').first();
        if($link.hasClass('closed')){
          $target.show();
          $link.removeClass('closed');
          $link.addClass('open');
        }else{
          $target.hide();
          $link.removeClass('open');
          $link.addClass('closed');
        }
        return false;
      } else {
        return true;
      }
    }
  );

**wehttamrd** · 03-22-2016, 01:45 PM

here is the HTML code to go along with it.

Code:

<nav id="nav-main-menu" class="navigation" role="navigation">
   <ul id="main-menu" class="main-nav left">
      <li class="first expanded has-dropdown" title="">
         <a href="/reputationdefender" title="">Search Results</a>
         <ul class="dropdown">
            <li class="first expanded show-for-small"><a href="/reputationdefender" title="">Search Results</a>
            <li class="first expanded has-dropdown" title="">
               <label>Solutions</label>
               <ul class="dropdown">
                  <li class="first expanded show-for-small"><span title="" class="nolink">Solutions</span>
                  <li class="first leaf" title=""><a href="/reputationdefender" title="">ReputationDefender</a></li>
                  <li class="leaf" title=""><a href="/boutique-solutions" title="">Boutique Solutions</a></li>
                  <li class="last leaf" title=""><a href="/business" title="">Enterprise Solutions</a></li>
               </ul>
            </li>
            <li class="last expanded has-dropdown" title="">
               <label>Resources</label>
               <ul class="dropdown">
                  <li class="last expanded show-for-small"><span title="" class="nolink">Resources</span>
                  <li class="first leaf" title=""><a href="/reputationdefender/how-reputation-management-works" title="">How it works</a></li>
                  <li class="leaf" title=""><a href="/reputationdefender/what-online-reputation" title="">What is online reputation?</a></li>
                  <li class="last leaf" title=""><a href="/reputationdefender/faq" title="">Frequently asked questions</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="expanded has-dropdown" title="">
         <a href="/privacy" title="">Online Privacy</a>
         <ul class="dropdown">
            <li class="expanded show-for-small"><a href="/privacy" title="">Online Privacy</a>
            <li class="first expanded has-dropdown" title="">
               <label>Solutions</label>
               <ul class="dropdown">
                  <li class="first expanded show-for-small"><span title="" class="nolink">Solutions</span>
                  <li class="first leaf" title=""><a href="/privacy" title="">Privacy PRO</a></li>
                  <li class="last leaf" title=""><a href="/executive-privacy" title="">ExecutivePrivacy</a></li>
               </ul>
            </li>
            <li class="last expanded has-dropdown" title="">
               <label>Resources</label>
               <ul class="dropdown">
                  <li class="last expanded show-for-small"><span title="" class="nolink">Resources</span>
                  <li class="first leaf" title=""><a href="/privacy/tips" title="">Online privacy tips</a></li>
                  <li class="last leaf" title=""><a href="/privacy/faq" title="">Frequently asked questions</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="last expanded has-dropdown" title="">
         <a href="/about-us" title="">About</a>
         <ul class="dropdown">
            <li class="last expanded show-for-small"><a href="/about-us" title="">About</a>
            <li class="first expanded has-dropdown" title="">
               <label>About Us</label>
               <ul class="dropdown">
                  <li class="first expanded show-for-small"><span title="" class="nolink">About Us</span>
                  <li class="first leaf" title=""><a href="/about-us" title="">Overview</a></li>
                  <li class="leaf" title="Reputation.com management"><a href="/about-us/management" title="Reputation.com management">Management</a></li>
                  <li class="leaf" title="Reputation.com board of directors"><a href="/about-us/board-of-directors" title="Reputation.com board of directors">Board of Directors</a></li>
                  <li class="leaf" title="Reputation.com advisors"><a href="/about-us/advisors" title="Reputation.com advisors">Advisors</a></li>
                  <li class="last leaf" title="Reputation.com Patents"><a href="/about-us/patents" title="Reputation.com Patents">Patents</a></li>
               </ul>
            </li>
            <li class="last expanded has-dropdown" title="">
               <label>Learn More</label>
               <ul class="dropdown">
                  <li class="last expanded show-for-small"><span title="" class="nolink">Learn More</span>
                  <li class="first leaf" title="Reputation.com blog"><a href="/blog" title="Reputation.com blog">Blog</a></li>
                  <li class="leaf" title="Job opportunities and openings"><a href="/about-us/careers" title="Job opportunities and openings">Careers</a></li>
                  <li class="leaf" title=""><a href="/press-room" title="">Press Room</a></li>
                  <li class="leaf" title="Reputation.com legal information"><a href="/legal" title="Reputation.com legal information">Legal &amp; Policies</a></li>
                  <li class="last leaf" title="Contact Reputation.com"><a href="/contact" title="Contact Reputation.com">Contact Us</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</nav>

**deathshadow** · 03-23-2016, 05:57 AM

You seem to have a bunch of scripting for nothing... and that markup is outright gibberish nonsense... what in blazes makes those be labels -- you don know what a label tag is FOR, right? (you know, why it even has a for="" attribute?)... I don't see any corresponding <input>, <textarea> or <select> for those labels.... (though laughably, you could abuse label + input to get rid of the scripttardery)

What's with the redundant title on boht the LI and the anchors inside them? Just WANT to waste bandwidth on nothing? Much less MOST of those are pointlessly redundant to the actual CONTENT of the tags so why the blazes are those even in there?

I'd have to see live what it is you are trying to accomplish with this, but I'm pretty sure that in excess of half your markup alone belongs on the cutting room floor... I also see the telltales of presentational hooks indicative of image-style design that has no legitimate purpose on a website apart from making it harder to make it accessible.

**rooter** · 04-11-2016, 04:26 AM

Originally Posted by deathshadow

You seem to have a bunch of scripting for nothing... and that markup is outright gibberish nonsense... what in blazes makes those be labels -- you don know what a label tag is FOR, right? (you know, why it even has a for="" attribute?)... I don't see any corresponding <input>, <textarea> or <select> for those labels.... (though laughably, you could abuse label + input to get rid of the scripttardery)

What's with the redundant title on boht the LI and the anchors inside them? Just WANT to waste bandwidth on nothing? Much less MOST of those are pointlessly redundant to the actual CONTENT of the tags so why the blazes are those even in there?

I'd have to see live what it is you are trying to accomplish with this, but I'm pretty sure that in excess of half your markup alone belongs on the cutting room floor... I also see the telltales of presentational hooks indicative of image-style design that has no legitimate purpose on a website apart from making it harder to make it accessible.

Speaking of gibberish nonsense, perhaps you should read your own post. It's the least helpful, most dickish, reply I have ever seen. You are aware that professional developers need to work with other people's horrible code, right? You do realize that CMS's like Drupal drop classes and divs like that all over the place right? Why not try to answer the actual question and be helpful instead of posting insulting and useless remarks that only make you look pointless and redundant. You act like the markup is so bad that you don't even have time to look through it, yet you have time to post three paragraphs of content acting like you are better than someone else.

Thread: Mobile menu not working in Firefox

Thread Tools

Rate This Thread

Mobile menu not working in Firefox

Tags for this Thread

Posting Permissions