Bootstrap collapsing navbar menu vertically after having centered items
<p>I have an issue with my bootstrap navbar. I recently found a way to center items in the navbar but the fact is that when the menu is collapsed these items stay horizontally aligned instead of vertically.</p>

<p>Here is what i have at the moment :</p>

<pre><code>&lt;div class="container-fluid"&gt;
&lt;nav class="navbar navbar-inverse navbar-fixed-top fixfollow center"&gt;
    &lt;div class="navbar-inner"&gt;
        &lt;div class="container"&gt;

            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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;a class="navbar-brand hidden-lg" href="/"&gt;&lt;i class="fa fa-home fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="collapse navbar-collapse"&gt;
                &lt;ul class="nav navbar-nav"&gt;

                    &lt;li&gt;
                        &lt;a class="navbar-brand visible-lg" href="/"&gt;&lt;i class="fa fa-home fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="/link"&gt;link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="/link"&gt;link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="/link"&gt;link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="/link"&gt;link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="/link"&gt;link&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>and the important css :</p>

<pre><code>.center .nav,
 .center .nav &gt; li
{
    float:none;
    display:inline-block;
    /*display:inline; /* ie7 fix */
    /*zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}


.center .navbar-inner {
    text-align:center;
}

.center .dropdown-menu {
    text-align: left;
}
</code></pre>

<p>With this I have my items centered in the navbar but displayed horizontally in the collpased menu. I want to have some help to change it in order to get back the classic behaviour ( i mean vertically ) of bootstrap collapsing menu without altering the centered items when the menu is not collapsed.</p>