<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default navbar-fixed-top"> <div class="Container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Zapnito</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#signUp" data-toggle="modal">Sign Up</a></li> <li><a href="#signIn" data-toggle="modal">Sign In</a></li> </ul> <form accept-charset="UTF-8" class="navbar-form navbar-right search-form" id="search-form" method="get" role="search"> <div class="form-group"> <input type="text" name="query" class="form-control" placeholder="Search and hit enter..."> </div> </form> <ul class="nav navbar-nav" id="main-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Channels <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Business Insights</a></li> <li><a href="#">Community Management</a></li> <li><a href="#">Platform Features</a></li> <li><a href="#">Technology</a></li> <li><a href="#">The Future of Work</a></li> <li><a href="#">Zapnito News</a></li> <li><a href="#">Zapnito University</a></li> </ul> </li> <li><a href="#">Questions</a></li> <li><a href="#">Forums</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Engaging Audiences Through Blogging</a></li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Contributors <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Team Members</a></li> <li><a href="#">Contributors</a></li> </ul> </li> <li class=""><a href="#">About</a></li> <li class=""><a href="#">Webinar</a></li> <li class=""><a href="#">DMCA</a></li> <li id="collapse-item"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a> <ul class="dropdown-menu" id="collapsed"> </ul> </li> </ul> </div> </div> <!--<div class="container"> <div class="row"> <h2>Multi level dropdown menu in Bootstrap 3</h2> <hr> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="#">Some action</a></li> <li><a href="#">Some other action</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a href="#">Even More..</a> <ul class="dropdown-menu"> <li><a href="#">3rd level</a></li> <li><a href="#">3rd level</a></li> </ul> </li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> </ul> </li> </ul> </div> </div> </div>-->

.navbar-nav > ul > li { display: inline-block; } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

var autocollapse = function() { var items = $('#main-nav'); var navbar = $('.navbar') var navHeight = navbar.innerHeight(); if (navHeight >= 50) { while(navHeight > 50) { var children = items.children('li:not(:last-child)'); var count = children.size(); console.log('Collapse'); $(children[count-1]).prependTo('#collapsed'); navHeight = navbar.innerHeight(); } } else { while(navHeight < 50 && (items.children('li').size() > 0)) { var collapsed = $('#collapsed').children('li'); var count = collapsed.size(); console.log('Uncollapse motherfucker'); $(collapsed[0]).insertBefore(items.children('li:last-child')); navHeight = navbar.innerHeight(); } if (navHeight>50) autocollapse(); } }; $(document).ready(function() { autocollapse(); $(window).on('resize', autocollapse); });