I have a Bootstrap 4 layout similar to this: https://www.codeply.com/go/yLO99L66MD
When there are too many nav items, I want them to be hidden, so I added this: nav {overflow:hidden}. This does the job, but the problem is that it also hides my dropdown menu. How can I hide extra menu items but still allow dropdowns to show up for visible items?
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">aaaaaaaa aaaaa </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bbbbbb bbbbb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">cccccccc cccccccc </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">dddd ddddddddd </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">eeeeeeeeeeeeeeeeee cv kbc vxckjvhkxcv </a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
You can use the navbar as this given example.
When you resize the browser the nav items will be moved inside to the drop-down if it not have an enough space.
[1]: http://jsfiddle.net/swasatz/3fn4d5oq/
Snippet Demo
Open the snippet in full page mode and resize the browser to see the changes.
$(document).ready(function () {
var menu = $("#nav-bar-filter"),
subMenu = $(".subfilter"),
more = $("#more-nav"),
parent = $(".filter-wrapper"),
ww = $(window).width(),
smw = more.outerWidth();
menu.children("li").each(function () {
var w = $(this).outerWidth();
if (w > smw) smw = w + 20;
return smw
});
more.css('width', smw);
function contract() {
var w = 0,
outerWidth = parent.width() - smw - 50;
for (i = 0; i < menu.children("li").size(); i++) {
w += menu.children("li").eq(i).outerWidth();
if (w > outerWidth) {
menu.children("li").eq(i - 1).nextAll()
.detach()
.css('opacity', 0)
.prependTo(".subfilter")
.stop().animate({
'opacity': 1
}, 300);
break;
}
}
}
function expand() {
var w = 0,
outerWidth = parent.width() - smw - 20;
menu.children("li").each(function () {
w += $(this).outerWidth();
return w;
});
for (i = 0; i < subMenu.children("li").size(); i++) {
w += subMenu.children("li").eq(i).outerWidth();
if (w > outerWidth) {
var a = 0;
while (a < i) {
subMenu.children("li").eq(a)
.css('opacity', 0)
.detach()
.appendTo("#nav-bar-filter")
.stop().animate({
'opacity': 1
}, 300);
a++;
}
break;
}
}
}
contract();
$(window).on("resize", function (e) {
($(window).width() > ww) ? expand() : contract();
ww = $(window).width();
});
});body {
font-family: verdana;
min-width: 250px;
}
ul#more-nav, ul#nav-bar-filter {
display: inline-block;
vertical-align: top;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 4px 8px 4px 8px;
margin: 0;
}
#nav-bar-filter li {
display: inline-block;
font-weight: bold;
}
a {
text-decoration: none;
color: #666;
font-size: 13px;
}
.filter-wrapper {
width: 100%;
background: #eee;
padding: 5px 10px 5px 10px;
}
#more-nav {
float: right;
}
.subfilter{
padding-top: 10px;
}
.subfilter li {
margin: 0 0 0 20px;
padding: 5px 0 0 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="twelve columns filter-wrapper">
<ul class="nav-bar-filter" id="nav-bar-filter">
<li><a href="#">All</a>
</li>
<li><a href="#">Small</a>
</li>
<li><a href="#">Medium</a>
</li>
<li><a href="#">Extra large</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Small-1</a>
</li>
<li><a href="#">Medium-1</a>
</li>
<li><a href="#">Extra large text</a>
</li>
<li><a href="#">Large text</a>
</li>
<li><a href="#">Another text</a>
</li>
<li><a href="#">text</a>
</li>
</ul>
<ul id="more-nav">
<li><b><a href="#">More ></a></b>
<ul class="subfilter"></ul>
</li>
</ul>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments