Remove dropdown link and show all of its items in navbar menu - css

Question

I'm using Twitter Bootstrap and its responsive design for the typical Twitter Bootstrap navbar menu at the top.
In there i have a few links and a dropdown menu. When i resize my browser to 768px or less, it hen transforms into a new sort of nav menu.
This all works fine out of the box, but what i'd like to have is that the dropdown menu is also expanded.
What happends now is that the dropdown menu is still collapsed. When i open it, it then creates a scrollbar inside that menu container which i really don't like.
Here's a screenshot of what i mean:
Example: http://getbootstrap.com/examples/jumbotron/
How can i remove the open/close Dropdown link, and have all of its items listed inside that menu so that it doesn't create an ugly scrollbar on the side of the menu?

Answer 1

You could split your problem in three parts:
1. the scrollbar
By default the dropdown menu get a fixed (max) height of 340px (and a overflow-y:auto, see also: Twitter bootstrap 3 navbar navbar-right outside navbar-collapse).
You can undo this max-height by remove it (line 52 max-height: 340px;) from navbar.less and recompile Bootstrap. Or add some css after Bootstrap's css in your document:
#media(max-width:767px)
{
.navbar-collapse {
max-height: none;
}
}
Note when the height of the menu becomes the height of your screen, you can't scroll your content due to the fixed position of your navbar.
2. open the dropmenu on collapse
On the first sight you should add an open class to the dropmenu on collapse, but the clearmenus function of dropdown.js will remove this class. Adding a display:block will show the dropdown menu, but its state /display will be like non collapsed.
A solution will be to add a class with the same styles as the open class which won't be remove by the clearmenus.
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
$('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
});
To give the opened class the same styles as the open class you will need to change your .less files and recompile Bootstrap after it.
in navbar.less (line: 215)
// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {
in dropdown.less (line: 119)
// Open state for the dropdown
.opened, .open {
resize
With the above the dropdown menu stays visible after undo the collapse (by resizing the screen) to prevent this add some css after Bootstrap's CSS (you could also add this to your Less files):
#media(min-width:768px)
{
.nav > li.opened .dropdown-menu {display: none;}
.nav > li.open .dropdown-menu {display: block;}
}
styling of the links in the dropdown
Your navbar use navbar-inverse to style it (see also: https://stackoverflow.com/questions/18936357/using-multiple-navbars-with-twitters-bootstrap-3/18936358#18936358)
Navbar-inverse will be defined in navbar.less too. To set the link colors for the opend class too, use:
#media (max-width: #screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu, .opened .dropdown-menu {
3. remove the dropdown link
css after Bootstrap's CSS:
#media(max-width:767px)
{
.nav > li > a.dropdown-toggle{display:none;}
}
Demo: http://jsfiddle.net/pgK4y/
See also: https://github.com/twbs/bootstrap/issues/10758

Answer 2

for the dropdown opened by default on mobile / small resolutions,
here is another approach using jquery that doesn't involve messing with less code or css.
tp://stackoverflow.com/a/23202921/1174172