Issue
For example I have menu with items:
1)
When I change browser's size, two last items merged two 1 dropdown
2)
3)
I need something like this. I have got Contacts_France | Contacts_Germany and when size will be decreased they are should be merged to one dropdown with name Contacts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MAx-nax</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact_france">Contact_France</a></li>
<li><a href="#contact_germany">Contact_Germany</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</body>
</html>
Solution
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#!/" class="navbar-brand">Logo</a>
<button data-toggle="collapse" data-target="#navbar-collapse" class="navbar-toggle collapsed">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">`enter code here`
<li role="presentation"><a href="#" class="hidden-sm">Germany</a></li>
<li role="presentation"><a href="#" class="hidden-sm">France</a></li>
<li role="presentation"><a href="#" class="hidden-sm">Poland</a></li>
<li role="presentation"><a href="#" class="hidden-sm">Czech Republic</a></li>
<li role="presentation"><a href="#" class="hidden-sm">Romania</a></li>
<li role="presentation"><a href="#" class="hidden-sm">Moldova</a></li>
<li role="presentation" class="dropdown hidden-xs hidden-lg hidden-md">
<a class="dropdown-toggle" data-toggle="dropdown">Western Europe<b class="caret"></b></a>
<ul class="dropdown-menu hidden-xs hidden-lg hidden-md">
<li role="presentation"><a href="#">Germany</a></li>
<li role="presentation"><a href="#">France</a></li>
</ul>
</li>
<li role="presentation" class="dropdown hidden-xs hidden-lg hidden-md">
<a class="dropdown-toggle" data-toggle="dropdown">East Europe<b class="caret"></b> </a>
<ul class="dropdown-menu hidden-xs hidden-lg hidden-md">
<li role="presentation"><a href="#">Poland</a></li>
<li role="presentation"><a href="#">Czech Republic</a></li>
<li role="presentation"><a href="#">Romania</a></li>
<li role="presentation"><a href="#">Moldova</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="presentation"><a href="#">Name</a></li>
<li role="presentation"><a href="#" class="hidden-xs hidden-lg"></a></li>
<li role="presentation"><a href="#" class="hidden-xs hidden-lg"><i class="glyphicon glyphicon-wrench"></i> </a></li>
<li role="presentation"><a href="#" class="hidden-xs hidden-lg"><i class="glyphicon glyphicon-log-out"></i> </a></li>
<li role="presentation"><a href="#" class="hidden-sm hidden-md">Setting</a></li>
<li role="presentation"><a href="#" class="hidden-sm hidden-md">Log out</a></li>
</ul>
</div>
</div>
</nav>
<br/>
</header>
Answered By - Max
