Prevent bootstrap navbar dropdown to get hidden in "mobile navbar menu - html

Question

I use bootstrap and i'm showing a language selection in the header.
Now when i reduce the width, bootstrap is going to put my elements in a mobile selection. (s. screenshot)
Most of the time thats a good thing, but in some cases i want options to stay visible. Fest option on the left side of the mobile menu.
<div class="navbar-header">
....
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
If I make two groups like
<ul class="nav navbar-nav navbar-right">
.. Non collapsable items
</ul>
<div class="collapse navbar-collapse" id="navbar-main">
.. collapsable items
</div>
then the non collapsable items are placed below the menu and not on the left side of it.

Answer 1

Here you go. Sounds like you want to exclude some menu items from the boostrap mobile view. I had similar question, and answer here.
Exclude menu item from the collapse of bootstrap 3 navbar

Answer 2

Reshared*
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-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>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News</li>
<li>Shop</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator</li>
<li>Extras</li>
</ul>
</div>
</div>
</nav>
original answer: Exclude menu item from the collapse of bootstrap 3 navbar

Answer 3

In order to remove a menu section from the auto-collapsing feature of Bootstrap, you need to move it outside of the . Something like the following:
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <!-- Items in here won't collapse -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse -->
<ul class="nav navbar-nav navbar-right">
Link
Another Link
</ul>
</div>
</div>
Anything inside the "collapse" div will collapse into the mobile menu. Anything that is not there, like the navbar-brand link in most menus, will not.
Hope that helps.