Exclude menu item from collapsing Bootsrap

Question

I have seen several questions related to this, but none seemed to solve my problem. I want to exclude some menu items from collapsing when on mobile. Specifically the \"User Nam

Answer 1

Use navbar-brand instead which will have the proper alignment on mobile..

http://www.codeply.com/go/CM2sytawRI

<nav role="navigation" class="navbar navbar-default">
    <div class="navbar-header">
        <div class="navbar-brand"><a class="" href="#"> User Name </a></div>
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li>
            <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li>
            <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li>
            <li class="visible-xs"><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Contact Us</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li>
        </ul>
    </div>
</nav>