Dynamically adaptive navbar examples - css

Question

Did you know any examples of Use, or any code examples of adaptive navigation, which hide menu elements depend of screen width?
Please give some links to examples or working websites with this type of responsive nav

Answer 1

Solve it!
HTML code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">NOSTROMO inc.</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="menu-item active">Антропоморфоз</li>
<li class="menu-item">Филогенез</li>
<li class="menu-item">Адаптагенность</li>
<li class="menu-item">Абберация</li>
<li class="menu-item">Суперпозиция</li>
<li class="menu-item">Микрофиламент</li>
<li class="menu-item">Квинтесенция</li>
<li class="menu-item">Нейропластичность</li>
<li class="dropdown" id="menu-colapsed">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-horizontal"></span>
</a>
<ul class="dropdown-menu">
<li class="collapsed-menu-item">Антропоморфоз</li>
<li class="collapsed-menu-item">Филогенез</li>
<li class="collapsed-menu-item">Адаптагенность</li>
<li class="collapsed-menu-item">Абберация</li>
<li class="collapsed-menu-item">Суперпозиция</li>
<li class="collapsed-menu-item">Микрофиламент</li>
<li class="collapsed-menu-item">Квинтесенция</li>
<li class="collapsed-menu-item">Нейропластичность</li>
</ul>
</li>
</li>
</div>
</div>
</nav>
CSS code:
.collapsed-menu-item {
display: none;
}
/*hide menu items on resize and show dropdown "more" menu and add nenu items to dropdown*/
#media (max-width: 1500px) {
.menu-item:nth-child(n+8) {display: none}
.collapsed-menu-item:nth-child(n+8) {display: block}
}
#media (max-width: 1300px) {
.menu-item:nth-child(n+7) {display: none}
.collapsed-menu-item:nth-child(n+7) {display: block}
}
#media (max-width: 1100px) {
.menu-item:nth-child(n+6) {display: none}
.collapsed-menu-item:nth-child(n+6) {display: block}
}
#media (max-width: 1000px) {
.menu-item:nth-child(n+5) {display: none}
.collapsed-menu-item:nth-child(n+4) {display: block}
}
/*show all menu elements in mobile view and hide dropdown menu "more"*/
#media (max-width: 768px) {
.menu-item {
display: block !important;
}
#menu-colapsed {
display: none;
}
}
#media (min-width: 1500px) {
#menu-colapsed {
display: none;
}
}
live demo on codepen: http://codepen.io/DmitriySatinaev/pen/adYLad - resize window to see changes

Answer 2

Twitter's Bootstrap framework has a nice responsive navbar that collapses down to a hamburger icon when there is not enough screen width to show all the menu items.
https://getbootstrap.com/examples/navbar-static-top/
To change the color/style of them requires a bit of knowledge on how the bootstrap framework works and is not so newbie friendly, but luckily there is a fantastic generator which you can use to generate custom basic styling of Bootstrap's navbar at http://twitterbootstrap3navbars.w3masters.nl/