How can I add a different menu to the mobile version of my bootstrap theme in WordPress?

Question

I have a main menu for desktop and tablet but I want the links in that menu to change when the user gets to the mobile view. Not really sure where to start. This is what I did for the Bootstrap menu for my desktop version in my header.php file:

<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"<?php bloginfo( 'name' ); ?>><img src="<?php bloginfo('template_directory');?>/img/snaglogo.png" /></a>
</div>
<div class="collapse navbar-collapse">


<?php
    $args = array(
          'menu'         => 'header-menu',
          'menu_class'   =>'nav navbar-nav navbar-right',
          'container'    =>'false'
          );
            wp_nav_menu( $args );

 ?>

</div><!--/.nav-collapse -->

Am I adding another piece for mobile? Not really sure.

Answer 1

I would suggest on your navbar using the bootstrap class:

<div class="hidden-xs hidden-sm">

Then creating a separate navbar for mobile with the classes:

<div class="visible-xs visible-sm hidden-md hidden-lg">

This will allow you to set the links to something completely different, without effecting the navbar in an adverse way.

Here is more information about the "hidden" and "visible" classes:

http://getbootstrap.com/css/#responsive-utilities-classes