So I've looked though some of the questions already asked about this issue and have not been able to find a solution that works for me.
I am using Bootstrap (v 3.3.5) to create a navbar menu at the top of my site. I am also using AngularJS (v 1.4.4) and Angular-UI-Bootstrap (v 0.13.3). When the menu collapses and is shown you have to toggle the menu button in order for it to close. clicking the menu links or outside of the menu has no effect.
So I tried several solutions talked about on Stackoverflow but none of them have worked for me. After several hours of pulling my hair out I came up with an option for closing the menu when the route changes (AngularJS $route) but my code does not seem to be doing the trick. I would love some advice.
(function (Directives, undefined)
{
app.Modules.app.directive("collaspeListener", [ function () /* AngularJS Directive */
{
return {
restrict: 'A',
link: function(scope, element, attr) {
$('#navcollaspe').on(shown.bs.collapse, function () { /*Bootstrap collapse JS */
console.log("shown");
$rootScope.$on('$routeChangeSuccess', function() { /*AngularJS $route */
$('#navcollaspe').collapse('hide') /* Bootstrap collapse JS */
})
})
}
}
}]);
}(app.Directives = app.Directives || {} ));
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" collapse-listener="">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed visible-xs-block" data-toggle="collapse" data-target="#navcollapse" 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 class="navbar-brand"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></div>
<div class="navbar-text navbar-left hidden-xs">Main Title</div>
<div class="navbar-text navbar-left visible-xs-block ">Short Title</div>
<div class="outside-nav">
<ul class="nav navbar-nav navbar-right visible-sm-block dropdown-menu-left">
<li ><span class="glyphicon glyphicon-home" aria-hidden="true"></span></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>....</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Applications</li>
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Company</li>
<li><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</li>
<li><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</li>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">My Account</li>
<li><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</li>
<li><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></li>
<li><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span></li>
</ul>
</div><!-- End outside-nav -->
</div><!-- End navbar-header -->
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>....</li>
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Applications<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Company<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</li>
<li><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</li>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> My Account <span class="badge">{{ user.newMessagesCount }}</span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</li>
<li><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></li>
<li><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</li>
</ul>
</li>
</ul>
</div><!-- End navbar-collapse -->
</div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->
So after looking over the code and doing some more research I was able to find a way to collapse the menu whenever a link within it was clicked.
I found a couple places where I miss spelled something, which after fixing got the code to execute the console.log('shown') but nothing else. So I ended up finding a great tutorial on how to properly use AngularJS and Bootstrap together using Angular-UI. The tutorial is by Chris Sevilleja.
So after adjusting my code to follow Angular-UI recommendations it works as expected. I also injected $rootScope based on a recomadation from Hinrich in the comments above. I have included the new code in hopes that it saves someone else some time and frustration. :)
(function (Controllers, undefined)
{
app.Modules.app.controller("navController", ['$scope', function ($scope)
{
$scope.isCollapsed = true;
}]);
}(app.Controllers = app.Controllers || {} ));
(function (Directives, undefined)
{app.Modules.app.directive("collapseListener", ['$rootScope', function ($rootScope)
{
return {
restrict: 'A',
controller: 'navController',
link: function(scope, element, attr) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous, rejection) {
if (scope.isCollapsed == false) {
scope.isCollapsed = true;
}
})
}
}
}]);
}(app.Directives = app.Directives || {} ));
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" collapse-listener="">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></div>
<div class="navbar-text navbar-left">Full Title</div>
</div><!-- End navbar-header -->
<div class="collapse navbar-collapse" collapse="isCollapsed">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li dropdown=""><a dropdown-toggle=""><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
</div><!-- End navbar-collapse -->
</div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->
Related
In bootstrap, with the below code i am able to expand and collapse the 2 menus. But when i expands a menu and click on the sub menu, then the sub menus are not staying collapse..
When i changed this line from class="collapse list-unstyled " to class="collapse list-unstyled show" the menus are collapsed and not shrinking when i click on the next main menu...
<?php include('header.php'); ?>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components top_admin">
</ul>
<ul class="list-unstyled components">
<li>
<a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
<i class="fa fa-tachometer" aria-hidden="true"></i>
<span>DASHBOARD </span>
</a>
</li>
<li>
<a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes1</span>
</a>
<ul class="collapse list-unstyled " id="my_note1">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
</ul>
</li>
<li>
<a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes2</span>
</a>
<ul class="collapse list-unstyled " id="my_note2">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
<li>
<span class="small_menu">SN</span>
<a class="la_cls" href="#">Search Notes</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
I need after clicking the sub menu the sub menus should me stayed collapsed util i click on the another main menu. Anyone please help me, what should i do to solve this problem. Thanks in advance..
<header role="banner" id="top" class="navbar navbar-static-top">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">M-Panel</div>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Click Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Live Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> News Reports</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> View Accounts</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Add Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span></span>
<small>Welcome,</small> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
</div>
I am trying to create a dropdown menu with responsive feature but the dropdown menu does not work when I click on them then nothing is open here is the code
<div class="navbar-header">
<button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG_ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggel" data-toggel="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggel" data-toggel="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
and the output is and also the sign I do not understand why it is the show
Just fix your spelling. Bootstrap can't target your classes correctly if they're spelled wrong. Bootstrap uses the spelling toggle, not toggel -
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG_ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
</ul>
</div>
</div>
It works. Your error is that you mis-spelled toggle to toggel everywhere in your code. Correct that and it all works perfectly fine.
<nav>
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG_ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Include bootstrap classes along with jquery.
JSFIDDLE
You have errors in the code "toggel is TOGGLE" for example.
It does not make you add functionality javascript should bootstrap the catch automatically if you have well the call to your JS
Example dropdown menu
Try This code for your problem
<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Change : dropdown-toggel to dropdown-toggle and data-toggel="dropdown" to data-toggle="dropdown"
Partially corrected output : Demo
try this before body:
<script>
$(function () {
$('.dropdown-toggle').dropdown();
});
</script>
The main issue is that menu items are overflowing off the page to the bottom. I have attempted to solve the issue and I have failed to do so and I really have burnt myself out trying to fix it. This menu is in an iframe but regardless the problem still occurs even if it is on a regular page. A picture of the problem is below:
Here is the code
<div class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 id="roleMenu" class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menuUL" class="nav navbar-nav">
<li{{ (Request::is('admin') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-home"></span> Home</li>
<li{{ (Request::is('admin/blogs*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-list-alt"></span> Pages</li>
<li{{ (Request::is('admin/comments*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-bullhorn"></span> Comments</li>
<li{{ (Request::is('admin/menuBuilder*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-bullhorn"></span> Menu Builder</li>
<li class="dropdown{{ (Request::is('admin/users*|admin/roles*') ? ' active' : '') }}">
<a class="dropdown-toggle" data-toggle="dropdown" href="{{{ URL::to('admin/users') }}}">
<span class="glyphicon glyphicon-user"></span> Users <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li{{ (Request::is('admin/users*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-user"></span> Users</li>
<li{{ (Request::is('admin/roles*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-user"></span> Roles</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>View Homepage</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span> {{{ Auth::user()->username }}} <span class="caret"></span>
</a>
<ul class="dropdown-menu " style="overflow:scroll"; >
<li><span class="glyphicon glyphicon-wrench"></span> A</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> B</li>
<li><span class="glyphicon glyphicon-wrench"></span> C</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> d</li>
<li><span class="glyphicon glyphicon-wrench"></span> e</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> f</li>
<li><span class="glyphicon glyphicon-wrench"></span> g</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> h</li>
<li><span class="glyphicon glyphicon-wrench"></span> i</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> j</li>
<li><span class="glyphicon glyphicon-wrench"></span> k</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> l</li>
<li><span class="glyphicon glyphicon-wrench"></span> m</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> n</li>
<li><span class="glyphicon glyphicon-wrench"></span> o</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> p</li>
<li><span class="glyphicon glyphicon-wrench"></span> q</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> r</li>
<li><span class="glyphicon glyphicon-wrench"></span> s</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> t</li>
<li><span class="glyphicon glyphicon-wrench"></span> u</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> v</li>
<li><span class="glyphicon glyphicon-wrench"></span> w</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> x</li>
<li><span class="glyphicon glyphicon-wrench"></span> y</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> z</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Multiple approaches taken:
1) Setting overflow:scroll to dropdown class:
Result: It works but not ideal at all.
2) Setting overflow:scroll to dropdown-menu class:
Result: A scroll bar appears but doesn't do anything(aka scrolling doesn't work)
3) Attempted to do solution here. If I change up the html or css to make it compatible it ruins other stuff already made and looks terrible. If anyone could help me with this I would greatly appreciate it.
More information to help:
My code is based on a laravel starter kit: https://github.com/andrewelkins/Laravel-4-Bootstrap-Starter-Site
I been at this for a few hours doing research and nothing for this seems like an easy solution, mainly because of the way my menu bar is structured. Anyone willing to provide help, css, javascript, or anything else that can help me would be greatly appreciated.
Maybe you should set height to dropdown-menu class , otherwise 'overflow:auto' won't work
How would I go about getting the social media buttons to align next to each other -- that is, horizontally rather than vertically -- in the mobile mode on the drop down menu?
The icons are within a standard bootstrap nav bar, aligned to the right side of the bar.
Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.
Here is my code for the menu div.
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html">Welcome </a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Broadmark Partners</li>
<li>Blog</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<h3 class="text-muted"> </h3>
<p> </p>
</div>
you just need to apply the nav-pills-class to the list like so.
<ul class="nav navbar-nav navbar-right nav-pills">
see your sample working here: http://www.bootply.com/pm5SsVZrOi
When I am resizing the browser screen to mobile size, desktop menu replaced by dropdown with multiple options:
But how to change that dropdown to menu with button like that:
By clicking the "Menu" button menu showing and hiding
In order to get menu like above we have to follow this markup
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
DEMO