Many related questions have been asked about this topic, but none of the solutions seem to work for me. I am trying to exclude certain menu items from collapsing on mobile devices, specifically the "User Name" item in this case. While I have managed to get it working to some extent, the left margin disappears when viewed on mobile. Does anyone have a solution for this issue?
Below is the code snippet:
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav pull-left">
<li> <a href="#"> User Name </a> </li>
</ul>
<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>
I appreciate any help provided!