Bootstrap Menu with Advanced Option Responsive Problem

Question

I used bootstrap for my work. I have a bunch of menu items at the top of the page, about 15 items. Therefore, my top menu does not match the width of the screen. It breaks down to the next line, represented by crowded menus. I want to stop the menu overflow on the next line, having the "Advanced" menu.

The idea is that crowded menu items are moved to the More drop-down menu. But I do not know how to detect menu overflow. How do I move additional menu items to the More drop-down menu?

I have a basic structure and markup in place.

Fiddle: http://jsfiddle.net/xFW8t/347/

Markup:

<ul class="nav nav-pills topnavi"> <li class="active" ><a href="#">Dashboard</a></li> <li ><a href="#">Docs</a></li> <li ><a href="#">Docs 2</a></li> <li ><a href="#">Docs 3</a></li> <li ><a href="#">Docs 4</a></li> <li ><a href="#">Data</a></li> <li ><a href="#">iWeb</a></li> <li ><a href="#">Program</a></li> <li ><a href="#">Config</a></li> <!-- <li ><a href="#">Smart Inside</a></li> <li ><a href="#">Settings </a></li> <li ><a href="#">Account</a></li> <li ><a href="#">Types</a></li> <li ><a href="#">Notifications</a></li> <li ><a href="#">History</a></li> <li ><a href="#">Redmine</a></li> <li ><a href="#">Logout</a></li> --> <li class="dropdown" > <a aria-expanded="false" aria-haspopup="true" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle"> More <span class="caret"></span> </a> <ul class="dropdown-menu"> <li ><a href="#">Settings </a></li> <li ><a href="#">Account</a></li> <li ><a href="#">Types</a></li> <li ><a href="#">Notifications</a></li> <li ><a href="#">History</a></li> <li ><a href="#">Redmine</a></li> <li class="divider" role="separator"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> 

CSS

 .topnavi { margin-top:26px; } .nav-pills.topnavi > li > a { border-radius: 4px 4px 0 0; background:#f2f2f2; padding: 8px 12px; font-size:12px; color: #727272; border:1px solid #e7e7e7; border-bottom:none; } .nav-pills.topnavi > li.active > a, .nav-pills.topnavi > li.active > a:focus, .nav-pills.topnavi > li.active > a:hover { background-color: #d9d9d9; color: #5b5b5b; border: none; } .nav-pills.topnavi > li + li { margin-left: 3px; } .dropdown-menu { right:0px !important; left:auto; } 

Answer 1

I want to stop the menu overflow in the next line of the "Advanced" menu.

You will have to collect additional list items and insert them into a separate list depending on the width of the menu compared to the total width of all menu items.

Having received this answer (and adapted it for Bootstrap): fooobar.com/questions/1236673 / ...

Markup:

Divide the menu into two ul s. One for the menu and one for the dropdown menu.

 <div class="menuwrap"> <ul id="menu" class="nav nav-pills menu"> ...<!-- This will contain all the menu items --> </ul> <ul class="nav nav-pills collect"> ...<!-- This will contain the dropdown --> </ul> </div> 

Javascript code snippet (jQuery):

 function collect() { elemWidth = $menu.width(); fitCount = Math.floor((elemWidth / varWidth) * ctr) - 1; $menu.children().css({"display": "block", "width": "auto"}); $collectedSet = $menu.children(":gt(" + fitCount + ")"); $("#submenu").empty().append($collectedSet.clone()); $collectedSet.css({"display": "none", "width": "0"}); } 

Where:

• $menu.width() gets the width of the menu
• varWidth - total width of all menu items
• ctr - number of menu items
• fitCount gets the number of menu items exceeding the width of the menu
• Reset the width of all elements that were reset to zero in step # 8
• $collectedSet collects all such items that exceed the width of the menu
• Clear the dropdown menu and add the cloned collected items.
• Set the width of the source elements to zero.

Here is a fiddle combining all of this: http://jsfiddle.net/abhitalks/y0ypz38w/

Note. This is useful for small simple menus and demos. For larger ones, it would be better to delete the menu items and go to the assembled drop-down list instead of cloning and changing the width. In addition, it is not optimized and may cause some problems in the case of edges. Once you get this idea, you can customize it here.

.