title: Keep links in navbar at collapsing using Bootstrap
body: <p>I'm creating a responsible navigation bar using Bootstrap. Now it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/KglsX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KglsX.png" alt="enter image description here"></a></p>
  
  <p>in <strong>expanded</strong> view, and:</p>
  
  <p><a href="https://i.stack.imgur.com/DKvex.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DKvex.png" alt="enter image description here"></a></p>
  
  <p>in <strong>collapsed</strong> view.</p>
  
  <p>In the normal view it looks okay, however in collapsed view I'd like to keep in the bar <em>Sign Up</em> links and <strong>not to have it</strong> in the collapsed list. Something like this (this screenshot was created in graphical editor):</p>
  
  <p><a href="https://i.stack.imgur.com/7JdTo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7JdTo.png" alt="enter image description here"></a></p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;nav class="navbar navbar-inverse"&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/aqgtmy6w/4/" rel="nofollow noreferrer">https://jsfiddle.net/aqgtmy6w/4/</a></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/21037833/exclude-menu-item-from-the-collapse-of-bootstrap-3-navbar">this post</a> but collapsed list there is broken, some links shifted left and right.</p>
  
  <p>How can I achieve keeping some links in navbar on collapsing, and how to exclude them from list (so that not to duplicate them)?</p>