title: Bootstrap mobile menu doesn't show in wordpress
body: <p>I have created a bootstrap theme for my wordpress website but the mobile menu doesn't show up when I make my browser window smaller
  I've tried everything on stackoverflow so far, but whenever I try out another menu code, my menu gets tiny and pulled to the right side of my browser window. I don't know what the problem is.</p>
  
  <p>Here's my menu code:</p>
  
  <pre><code>&lt;body &lt;?php body_class(); ?&gt;&gt;
  &lt;?php if ( is_front_page() ) { ?&gt;
  
  &lt;nav class="navbar navbar-home navbar-static-top" role="navigation"&gt;
  &lt;div class="container"&gt;
    &lt;!-- Mobile display --&gt;
    &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="&lt;?php echo home_url(); ?&gt;"&gt;&lt;img src="http://localhost:8888/wp-content/uploads/2016/01/proformat_logotypewhite@2x.png" height="20" width="157"&gt;&lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;!-- Collect the nav links for toggling --&gt;
    &lt;?php // Loading WordPress Custom Menu
       wp_nav_menu( array(
          'container_class' =&gt; 'collapse navbar-collapse navbar-ex1-collapse',
          'container_id'    =&gt; 'navbar-ex1-collapse',
          'menu_class'      =&gt; 'nav navbar-nav pull-right',
          'menu_id'         =&gt; 'main-menu',
          'walker'          =&gt; new Cwd_wp_bootstrapwp_Walker_Nav_Menu()
      ) );
    ?&gt;
  &lt;/nav&gt;
  
    &lt;div class="fullscreen-bg"&gt;
    &lt;div class="hometext"&gt;
  &lt;h1 style="color: #ffffff;"&gt;VI ÄLSKAR BILDER.&lt;/h1&gt;
  &lt;h4 style="color: #ffffff;"&gt;Vi gör tavlor på en mängd olika vis. Komponera din egen kombination av material och bearbetning eller välj bland våra färdiga lösningar.&lt;/h4&gt;
  &lt;/div&gt;
  &lt;span class="read-more-container"&gt;&lt;a class="scroll" href="#start"&gt;LÄS MER&lt;br&gt;&lt;img src="http://localhost:8888/wp-content/uploads/2016/01/arrowdown.png" style="max-width: 50px;"/&gt;&lt;/a&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;?php } else { ?&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
  &lt;div class="container"&gt;
    &lt;!-- Mobile display --&gt;
    &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="&lt;?php echo home_url(); ?&gt;"&gt;&lt;img src="http://localhost:8888/wp-content/uploads/2015/10/proformat_logotype@2x.png" height="20" width="157"&gt;&lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;!-- Collect the nav links for toggling --&gt;
    &lt;?php // Loading WordPress Custom Menu
       wp_nav_menu( array(
          'container_class' =&gt; 'collapse navbar-collapse navbar-ex1-collapse',
          'menu_class'      =&gt; 'nav navbar-nav pull-right',
          'menu_id'         =&gt; 'main-menu',
          'walker'          =&gt; new Cwd_wp_bootstrapwp_Walker_Nav_Menu()
      ) );
    ?&gt;
  &lt;/nav&gt;
  </code></pre>
  
   
  
  <p>I have two different menus on my website. One that is showing only on the front page, and another one on every other page. (they have different colors and logotypes)</p>
  
  <p>EDIT:
  The HTML code that is being rendered:</p>
  
  <pre><code>&lt;nav class="navbar navbar-home navbar-static-top" role="navigation"&gt;
  &lt;div class="container"&gt;
    &lt;!-- Mobile display --&gt;
    &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="http://localhost:8888"&gt;&lt;img src="http://localhost:8888/wp-content/uploads/2016/01/proformat_logotypewhite@2x.png" height="20" width="157"&gt;&lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;!-- Collect the nav links for toggling --&gt;
    &lt;div id="navbar-ex1-collapse" class="collapse navbar-collapse navbar-ex1-collapse"&gt;&lt;ul id="main-menu" class="nav navbar-nav pull-right"&gt;&lt;li id="menu-item-394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-394"&gt;&lt;a href="http://localhost:8888/material/"&gt;MATERIAL&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-393"&gt;&lt;a href="http://localhost:8888/bearbetning/"&gt;BEARBETNING&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392"&gt;&lt;a href="http://localhost:8888/bildtjanster/"&gt;BILDTJÄNSTER&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"&gt;&lt;a href="http://localhost:8888/kontakt/"&gt;KONTAKT&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>