title: Joomla 3.0 on Gantry - bootstrap - duplicating the mainmenu for phone
body: <p>I am working on a new template using Gantry as a base and need to build a menu in a way to handle a mobile phone. The problem I am having is that the way I modified the default.php file in mod_menu in order to duplicate the menu for a mobile setup also dups the other menus in the site ie. footer menu. </p>
  
  <p>Is there a way I can build out the main menu to be mobile friendly without messing with the footer menu? </p>
  
  <p>Here is a link to the working example I am dealing with. Notice the footer menu acts the same way as the mainmenu whe you scale down to a phone size.</p>
  
  <p><a href="http://www.mniac.com/spymaniac30/" rel="nofollow">http://www.mniac.com/spymaniac30/</a></p>
  
  <pre><code>&lt;nav class="main &lt;?php echo $class_sfx; ?&gt;"&lt;?php
  $tag = '';
  if ($params-&gt;get('tag_id') != null)
  {
      $tag = $params-&gt;get('tag_id') . '';
      echo ' id="' . $tag . '"';
  }
  ?&gt; role="navigation"&gt;
  &lt;ul&gt;
          &lt;?php if ($class_sfx === 'nav-list') : ?&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li class="nav-header"&gt;&lt;?php echo $module-&gt;title; ?&gt;&lt;/li&gt;
      &lt;?php endif; ?&gt;
      &lt;?php
  
      $previous_parent = null;
      foreach ($list as $i =&gt; &amp;$item) :
          $class = '';
          if ($item-&gt;id == $active_id)
          {
              $class .= 'current ';
          }
  
          if ($item-&gt;type == 'alias' &amp;&amp;
                  in_array($item-&gt;params-&gt;get('aliasoptions'), $path)
                  || in_array($item-&gt;id, $path))
          {
              $class .= 'active ';
          }
          if ($item-&gt;deeper)
          {
              $class .= 'deeper ';
          }
  
          if ($item-&gt;parent)
          {
              $class .= 'parent dropdown ';
              $previous_parent = $item-&gt;id;
              $item-&gt;flink = "#";
          }
  
          if (!empty($class))
          {
              $class = ' class="' . trim($class) . '"';
          }
  
          echo '&lt;li id="item-' . $item-&gt;id . '"' . $class . '&gt;';
  
          // Render the menu item.
          switch ($item-&gt;type) :
              case 'separator':
              case 'url':
              case 'component':
                  require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item-&gt;type);
                  break;
  
              default:
                  require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
                  break;
          endswitch;
  
          // The next item is deeper.
          if ($item-&gt;deeper)
          {
              echo '&lt;ul class="jb-nav dropdown-menu" role="menu" aria-labelledby="drop' . $previous_parent . '"&gt;';
          }
          // The next item is shallower.
          else if ($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;/nav&gt;
  
  &lt;nav class="mobile &lt;?php echo $class_sfx; ?&gt;"&lt;?php
  $tag = '';
  if ($params-&gt;get('tag_id') != null)
  {
      $tag = $params-&gt;get('tag_id') . '';
      echo ' id="' . $tag . '"';
  }
  ?&gt; role="navigation"&gt;
  &lt;div id="menu-link"&gt;&lt;a href="#"&gt;MENU&lt;/a&gt;&lt;/div&gt;
  &lt;ul style="display:none;"&gt;
          &lt;?php if ($class_sfx === 'nav-list') : ?&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li class="nav-header"&gt;&lt;?php echo $module-&gt;title; ?&gt;&lt;/li&gt;
      &lt;?php endif; ?&gt;
      &lt;?php
  
      $previous_parent = null;
      foreach ($list as $i =&gt; &amp;$item) :
          $class = '';
          if ($item-&gt;id == $active_id)
          {
              $class .= 'current ';
          }
  
          if ($item-&gt;type == 'alias' &amp;&amp;
                  in_array($item-&gt;params-&gt;get('aliasoptions'), $path)
                  || in_array($item-&gt;id, $path))
          {
              $class .= 'active ';
          }
          if ($item-&gt;deeper)
          {
              $class .= 'deeper ';
          }
  
          if ($item-&gt;parent)
          {
              $class .= 'parent dropdown ';
              $previous_parent = $item-&gt;id;
              $item-&gt;flink = "#";
          }
  
          if (!empty($class))
          {
              $class = ' class="' . trim($class) . '"';
          }
  
          echo '&lt;li id="item-' . $item-&gt;id . '"' . $class . '&gt;';
  
          // Render the menu item.
          switch ($item-&gt;type) :
              case 'separator':
              case 'url':
              case 'component':
                  require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item-&gt;type);
                  break;
  
              default:
                  require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
                  break;
          endswitch;
  
          // The next item is deeper.
          if ($item-&gt;deeper)
          {
              echo '&lt;ul class="jb-nav dropdown-menu" role="menu" aria-labelledby="drop' . $previous_parent . '"&gt;';
          }
          // The next item is shallower.
          else if ($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;/nav&gt;
  </code></pre>
  
  <p>Thanks all</p>