If there is too many menu items how to gather them into collapsed menu


Tags: html,css,twitter-bootstrap

Problem :

I have a navbar which shows category items. If the menu items exceed navbar how can I gather them into drop down menu with bootsrap 3.0

here is current navbar it shows only 10 because of view point. I have more items but they are not displayed. enter image description here

depends on the screen size how I can gather them into drop down menu so it would look like this (I mouse over ALL CATEGORIES and menu appeared)

enter image description here

is there any way to do this with bootsrap css?

thanks



Solution :

There's a good example here which should get you started and give you a good idea on how to nav-bar classes work.

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

I've created a fiddle which you can have a look at. Of course this is a simple example but you can expand from this by using your custom css styling as required.


    CSS Howto..

    How can I get the font size of an element as it was set by css

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How use Append Jquery

    How to make highlighted table with rowspan

    how to do jquery once fade out has finished?

    How do I find space between lines in HTML?

    How to make diagonal titles on html tables

    Javascript: Hover over Issues & How can I structure the html efficiently?

    How do I return the box height to original state when clicked again in JQuery?

    how to overrule prior css

    How to make right-side triangle in CSS ribbon menu?

    How to make a very simple coloured 1-line text area?

    Create dom elem on the fly or hide/show

    how to change the css in td on mouse click using javascript

    How to apply css class to an html element using jquery in ASP .NET MVC?

    How do I make current menu item active in asp.net webforms

    How to create a circle with text coming out of it like rays [closed]

    How to rotate text using CSS

    How to place a responsive background according to content height with HTML / CSS?

    How to load CSS in Django templates?

    How to make flash movie to scale proportunatly to div width?

    How to get a css stylesheet value that is not interpreted by the browswer?

    How to align CSS Input type Text Placeholder Image

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    How to crop SVG file within HTML/CSS

    Showing/hiding content with jQuery

    Jquery: show IMG on click

    How to properly use CSS in GWTP?

    How to rotate an image back and forth with JavaScript

    How can I hide with CSS only?