title: How to integrate a bootstrap navbar in Wordpress?
body: <p>I've been working on a revision of a website.
  We use Wordpress and the responsive navigation bar is not good.
  When I use a mobile device, I want to have something like:</p>
  
  <p><img src="https://i.stack.imgur.com/XVAx9.png" alt="enter image description here"></p>
  
  <p>The nav bar of the website is only realized by Wordpress, and I want to use Bootstrap.
  The navbar's code is :</p>
  
  <pre><code>   &lt;?php responsive_container(); // before container hook ?&gt;
  &lt;div id="container" class="hfeed clear &lt;?php if($GLOBALS['home'] == 1) { ?&gt; home &lt;?php } ?&gt;" &gt;
  
      &lt;?php responsive_header(); // before header hook ?&gt;
      &lt;!-- &lt;a href="javascript:gaOptout()"&gt;Cliquez ici pour vous opposer aux cookies de mesure d'audience de Google&lt;/a&gt; --&gt;
      &lt;div id="header" class="clearfix"&gt;
          &lt;div class="wrap"&gt;
  
              &lt;?php responsive_in_header(); // header hook ?&gt;
  
  
              &lt;?php if ($is_blog!=1){ ?&gt;
  
                  &lt;div id="logo"&gt;
                      &lt;a href="&lt;?php echo home_url(); ?&gt;"&gt;&lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/images/logo.png" width="266" alt="logo xee"/&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                      &lt;?php wp_nav_menu(array(
                          'theme_location'  =&gt; 'header-menu',
                      ));
                      ?&gt;
  
              &lt;?php } else { ?&gt;
  </code></pre>
  
  <p>I've tried to implement a responsive button with Bootstrap like that:</p>
  
  <p></p>
  
  <pre><code>&lt;?php responsive_in_header(); // header hook ?&gt;
  
  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" style="float: left"&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;?php if ($is_blog!=1){ ?&gt;
  
      &lt;div id="logo"&gt;
          &lt;a href="&lt;?php echo home_url(); ?&gt;"&gt;&lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/images/logo.png" width="266" alt="logo xee"/&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
      &lt;ul class="nav"&gt;
          &lt;?php wp_nav_menu(array(
              'theme_location'  =&gt; 'header-menu',
          ));
          ?&gt;
          &lt;/ul&gt;&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>but the result is on: <a href="http://wwwtest.xee.com" rel="nofollow noreferrer">wwwtest.xee.com</a> using the device emulator by chrome</p>
  
  <p>Have you ever seen this problem?</p>