title: Joomla mobile menu conflicts
body: <p>I am working on Joomla website. This is the <a href="http://www.konarknirman.com/index.php" rel="nofollow noreferrer">link</a> to the website. This website with two menus is working fine on the desktop size screen but when viewed on smartphone, say, iphone 5 
  it shows eight drop down menus instead of two. <br/><br/>This is the image when <a href="http://www.konarknirman.com/index.php/konark-gardens" rel="nofollow noreferrer">this link</a> is viewed  on iphone: <br/> <img src="https://i.stack.imgur.com/QaMrO.jpg" alt="enter image description here">. <br/> <br/>The page opens fine on mobile device when there is only one menu. I can not see any kind of js conflict either. From where should I start diagnosing the issue? <br/><br/> Thanks. <br/><br/><strong>EDIT:</strong> There are only two menu modules that too only on the inside links one of which is posted here. I have superfish menu template code posted here: <br/><br/></p>
  
  <pre><code>&lt;?php
  /**
   * @package     Joomla.Site
   * @subpackage  mod_menu
   * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. 
  All rights reserved.
   * @license     GNU General Public License version 2 or later; see LICENSE.txt
   */
  
  // No direct access.
  defined('_JEXEC') or die;
  
  // Note. It is important to remove spaces between elements.
  $layouttype = $params-&gt;get('layouttype');
  switch ($layouttype) {
  case 'hor':
      $layout_class = "";
      break;
      case 'vert':
      $layout_class = "sf-vertical";
      break;
      case 'nav':
      $layout_class = "sf-navbar";
      break;  
  default:
      $layout_class = "";
      break;
  }
  ?&gt;
  
  &lt;ul class="sf-menu &lt;?php echo $class_sfx;?&gt; &lt;?php echo $layout_class; ?&gt;"&lt;?php
  $tag = '';
  if ($params-&gt;get('tag_id')!=NULL) {
      $tag = $params-&gt;get('tag_id').'';
      echo ' id="'.$tag.'"';
  }
  ?&gt;&gt;
  
  &lt;?php
  foreach ($list as $i =&gt; &amp;$item) :
  $class = 'item-'.$item-&gt;id;
  if ($item-&gt;id == $active_id) {
      $class .= ' current';
  }
  
  if (in_array($item-&gt;id, $path)) {
      $class .= ' active';
  }
  elseif ($item-&gt;type == 'alias') {
      $aliasToId = $item-&gt;params-&gt;get('aliasoptions');
      if (count($path) &gt; 0 &amp;&amp; $aliasToId == $path[count($path)-1]) {
          $class .= ' active';
      }
      elseif (in_array($aliasToId, $path)) {
          $class .= ' alias-parent-active';
      }
  }
  
  if ($item-&gt;deeper) {
      $class .= ' deeper';
  }
  
  if ($item-&gt;parent) {
      $class .= ' parent';
  }
  
  if (!empty($class)) {
      $class = ' class="'.trim($class) .'"';
  }
  
  echo '&lt;li'.$class.'&gt;';
  
  // Render the menu item.
  switch ($item-&gt;type) :
      case 'separator':
      case 'url':
      case 'component':
          require JModuleHelper::getLayoutPath('mod_superfish_menu', 'default_'.$item-&gt;type);
          break;
  
      default:
          require JModuleHelper::getLayoutPath('mod_superfish_menu', 'default_url');
          break;
  endswitch;
  
  // The next item is deeper.
  if ($item-&gt;deeper) {
      echo '&lt;ul&gt;';
  }
  // The next item is shallower.
  elseif ($item-&gt;shallower) {
      echo '&lt;/li&gt;';
      echo str_repeat('&lt;/ul&gt;&lt;/li&gt;', $item-&gt;level_diff);
  }
  // The next item is on the same level.
  else {
      echo '&lt;/li&gt;';
  }
  endforeach;
  ?&gt;&lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
  // initialise plugins
  jQuery(function(){
      jQuery('ul.sf-menu')
          &lt;?php if($params-&gt;get('supersubs')): ?&gt; 
              .supersubs({
                  minWidth:    12,   // minimum width of sub-menus in em units
                  maxWidth:    27,   // maximum width of sub-menus in em units
                  extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                               // due to slight rounding differences and font-family
              })
      &lt;?php endif; ?&gt; 
      .superfish({
          hoverClass:    'sfHover',         
      pathClass:     'overideThisToUse',
      pathLevels:    1,    
      delay:         &lt;?php echo $params-&gt;get('sf-delay'); ?&gt;, 
      animation:     {&lt;?php echo $params-&gt;get('sf-animation'); ?&gt;}, 
      speed:         '&lt;?php echo $params-&gt;get("sf-speed"); ?&gt;',   
      speedOut:      '&lt;?php echo $params-&gt;get("sf-speed-out"); ?&gt;',   
      autoArrows:    false, 
      disableHI:     false, 
      useClick:      &lt;?php echo $params-&gt;get('useClick'); ?&gt;,
      easing:        "&lt;?php echo $params-&gt;get('easing'); ?&gt;",
      onInit:        function(){},
      onBeforeShow:  function(){},
      onShow:        function(){},
      onHide:        function(){},
      onIdle:        function(){}
      });
  });
  
  jQuery(function(){
      jQuery('.sf-menu').mobileMenu({
          defaultText: '&lt;?php echo $params-&gt;get('defaultText'); ?&gt;',
          className: '&lt;?php echo $params-&gt;get('className'); ?&gt;',
          subMenuClass: '&lt;?php echo $params-&gt;get('subMenuClass'); ?&gt;'
      });
  })
  
  jQuery(function(){
      var ismobile = navigator.userAgent.match(/(iPhone)|(iPod)|(android)|(webOS)/i)
      if(ismobile){
          jQuery('.sf-menu').sftouchscreen({});
      }
  })
  </code></pre>
  
  <p></p>
  
  <p><strong>One more edit to include jquery.mobilemenu.js :</strong></p>
  
  <pre><code>(function($){
  $.fn.mobileMenu = function(options) {
  
  var defaults = {
          defaultText: 'Navigate to...',
          className: 'select-menu',
          subMenuClass: 'sub-menu',
          subMenuDash: '&amp;ndash;'
      },
      settings = $.extend( defaults, options ),
      el = $(this);
  
  this.each(function(){
      // ad class to submenu list
      el.find('ul').addClass(settings.subMenuClass);
  
      // Create base menu
      $('&lt;select /&gt;',{
          'class' : settings.className
      }).insertAfter( el );
  
      // Create default option
      $('&lt;option /&gt;', {
          "value"     : '#',
          "text"      : settings.defaultText
      }).appendTo( '.' + settings.className );
  
      // Create select option from menu
      el.find('a, .separator').each(function(){
          var $this   = $(this),
                  optText = '' + $this.text(),
                  optSub  = $this.parents( '.' + settings.subMenuClass ),
                  len         = optSub.length,
                  dash;
  
          // if menu has sub menu
          if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
              dash = Array( len+1 ).join( settings.subMenuDash );
              optText = dash + optText;
          }
  
          if (!$this.hasClass('separator')) {
  
          // Now build menu and append it
          $('&lt;option /&gt;', {
              "value" : this.href,
              "html"  : optText,
              "selected" : (this.href == window.location.href)
          }).appendTo( '.' + settings.className );
  
          } else {
              $('&lt;option /&gt;', {
              "value" : '#',
              "html"  : optText
          }).appendTo( '.' + settings.className );
          }
  
      }); // End el.find('a').each
  
  
  
      // Change event on select element
      $('.' + settings.className).change(function(){
          var locations = $(this).val();
          if( locations !== '#' ) {
              window.location.href = $(this).val();
          };
      });
  
  }); // End this.each
  
  return this;
  
  };
  })(jQuery);
  </code></pre>