title: How can I fix my Bootstrap 3 RC1 navbar HAML code to work in narrow/mobile views?
body: <p>I have been using the following HAML code to generate a Bootstrap 2.x.y navbar:</p>
  
  <pre><code>.navbar.navbar-fixed-top.navbar-inverse
      .navbar-inner
          .container
              %a.brand{:href =&gt; '/'} xyz.com
              %ul.nav
                  %li
                      %a{:href =&gt; '/'}Home
                  %li
                      %a{:href =&gt; '/blog'}Articles
                  %li
                      %a{:href =&gt; '/research'}Research
                  %li
                      %a{:href =&gt; '/contact'}Contact
                  %li
                      %a{:href =&gt; '/gallery',}Gallery
  </code></pre>
  
  <p>When viewed in a narrow browser window or on a mobile phone, the navbar elements were nicely stacked as shown in the screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/iR7Lj.png" alt="Old navbar view on mobile"></p>
  
  <p>I just tried upgrading my project to Bootstrap 3. I am now using this HAML code for the navbar:</p>
  
  <pre><code>.navbar.navbar-fixed-top.navbar-inverse
      .container
          %a.navbar-brand{:href =&gt; '/'} xyz.com
          %ul.nav.navbar-nav
              %li
                  %a{:href =&gt; '/'}Home
              %li
                  %a{:href =&gt; '/blog'}Articles
              %li
                  %a{:href =&gt; '/research'}Research
              %li
                  %a{:href =&gt; '/contact'}Contact
              %li
                  %a{:href =&gt; '/gallery',}Gallery 
  </code></pre>
  
  <p>However, the navbar now does not work as before (see second screenshot):</p>
  
  <p><img src="https://i.stack.imgur.com/o6X8X.png" alt="New, broken navbar"></p>
  
  <p>How can I fix the HAML code to get back to the old behavior using bootstrap 3 RC1?</p>