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 -->
Go to your Navbar settings and find the navigation item you want to hide for a particular page. Click to edit and assign it a classname. You could assign it something like "hide-navigation-item."
A "navbar" is an area on a page that contains navigation components (links, buttons, etc) for getting to other pages of the website. A "nav" is an HTML element that is normally used to enclose other elements related to navigation.
The navbar-collapse refers to the menu that is in the mobile view with the navbar (contains links, and toggle-friendly content). They are in the bootstrap CSS (see here). See this for a full rundown of how the navbar and collapse work together. Follow this answer to receive notifications.
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.
Demo
[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>
For the menu-items that you would like to view as hidden on mobile devices, wrap a span around the list-item(s) that you want hidden and add the bootstrap 4 beta hidden values, like this.
<span class="d-none d-xs-block">
<li class="nav-item">
<a class="nav-link" href="#">aaaaaaaa 1234 </a>
</li>
</span>
You can also apply the class to an <a>
tag to hide that specific link within the drop-down menu. Furthermore, tinker with the d-xs-block
class to meet your specifications.
I would like to provide you with a couple of sources to help guide you with regards to hiding elements at specific breakpoints.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With