title: How to center navbar content after menu collapse?
body: <p>I am working on a website which needs to have two headers. The second header holds the social icons (facebook, twitter, linkedin, google plus) and next to them I have this heading:"Fast Social Login>>" . </p>
  
  <p>Initially, with the css, I pulled them to the right. I am using the 'collapse' and 'navbar-collapse' classes for the heading because I don't want it to be shown on smaller screens. However, when this heading collapses, I want the social icons to be centered on the navbar.</p>
  
  <p>Can this be solved with CSS adjustment or do I need to write scripts?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-static-top header-bottom-border"&gt;
      &lt;div class="container"&gt;
          &lt;a href="#"&gt;&lt;img src="img/googleplus.png" class="social-position pull-right"&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/linkedin.png" class="social-position pull-right"&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/twitter.png" class="social-position pull-right"&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/facebook.png" class="social-position pull-right"&gt;&lt;/a&gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;h2 class=" navbar-text pull-right" style="color: #b0b0b0"&gt;FAST SOCIAL LOGIN&gt;&gt;&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header-bottom-border{
      border-width: 0 0 5px 0;
      border-color: #4c9322;
  }
  .social-position{
      width: 3em;
      height: 3em;
      display:inline-block;
      margin-left: 10px;
      margin-top: 10px;
      vertical-align: middle;
  }
  </code></pre>