I would like have a nav-pill with a dropdown showing a few different options. To this end, this is what I have:
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">FAQ's</li>
<li role="presentation" class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</nav>
This does not seem to work however. I can see the dropdown but when I click, nothing happens. Wondering if anyone has encountered the same issue.
Thanks.
Your code seems to work fine I have a working fiddle at the following link Fiddle.
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">FAQ's</li>
<li role="presentation" class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</nav>
Make sure that you have your libraries loaded in the correct order loading jquery.js first then bootstrap.js. If this is not the problem then you more than likely have conflicting javascript. Take out javascript files one by one and see what javascript is conflicting with bootstrap's javascript.
As wrote Drinkin People, you have working code! just load your jquery.js script before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
jsfiddle-link
Related
I was struggling wit this and found some way, I think I need to borrow power of css for this. please land me some skill if you know how.
I have navbar like this,
<div class = "header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
and second header
<div class="subheader" style="background:yellow;>
<p>you</p>
</div>
now I want to bring these two blocks together so they look like one navbar divided by background color. how do I do this? I tried setting padding, margin to zero for both but won't work
Supposing you are using bootstrap, just set margin-bottom: 0 for the .navbar. You might want to remove borders as well.
See fiddle: https://jsfiddle.net/yyw99nky/
I would like to combine my two entries in a new submenu
I have this
<li class="dropdown" ng-controller="MenuPropertiesCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Properties <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu" ng-click="$event.stopPropagation()"
style="width: 450px !important">
<li>Creer</li>
<li class="divider"></li>
<li>Comparer properties par versions</li>
<li class="divider"></li>
<li>Comparer properties par plateformes</li>
</ul>
</li>
I have this
Properties
|
|_Creer
|
|_Comparer properties par versions
|
|_Comparer properties par plateformes
So i want to do this ..?
Properties
|
|_Creer
|
|__Comparer
|
|_Comparer properties par versions
|
|_Comparer properties par plateformes
Example in JS Fiddle
you are using the bootstrap make easily drop dun menu. put this html script in your menu
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
and more info to refer this link http://getbootstrap.com/components/#nav
<ul class="dropdown-menu1 pull-left twoColumns">
<li class="dropdown submenu">
Welcome Slip<b class="caret1" style="margin-left:98px"></b>
<ul class="dropdown-menu left33">
<li>System Manual - L1</li> <li class="divider"></li>
<li>Procedure Manual-L-II </li> <li class="divider"></li>
<li>ROR</li> <li class="divider"></li>
<li>Key Process Maps</li>
</ul>
</li>
<li class="divider"></li>
<li>Is HelpDesk</li>
<li class="divider"></li>
<li>Meeting Manager System</li><li class="divider"></li>
<li>Outlook (Email on Intranet) </li><li class="divider"></li>
<li>BPCL(R) Material Movement</li><li class="divider"></li>
<li>Online Estates Services System</li><li class="divider"></li>
<li>Online Housekeeping System</li><li class="divider"></li>
<li>Electrical Maintenance Services</li><li class="divider"></li>
<li>Spares Inventory Management </li><li class="divider"></li>
<li>TECTrack - File Tracking System</li><li class="divider"></li>
<li>Action Taken Report </li><li class="divider"></li>
<li>Material Codification Request</li><li class="divider"></li>
<li>Asset Disposal Tracking System</li><li class="divider"></li>
<li class="dropdown submenu">
Online Purchase Requisition System<b class="caret1" style="margin-left:98px"></b>
<ul class="dropdown-menu left33">
<li>System Manual - L1</li> <li class="divider"></li>
<li>Procedure Manual-L-II </li> <li class="divider"></li>
<li>ROR</li> <li class="divider"></li>
<li>Key Process Maps</li>
</ul>
</li><li class="divider"></li>
<li>Contract Monitoring System</li><li class="divider"></li>
<li>License Tracking System</li><li class="divider"></li>
<li>CyberDOCS Application</li><li class="divider"></li>
<li>Scaffolding Material IssueTraker System</li><li class="divider"></li>
<li>Scaffolding Material IssueTraker System</li><li class="divider"></li>
<li>Telephone Directory</li><li class="divider"></li>
<li>Vehicle Pass Management System</li><li class="divider"></li>
<li>Access To Honeywell Network Camera</li><li class="divider"></li>
<li>Access To Network Cameras</li><li class="divider"></li>
<li>Public Relations Services</li><li class="divider"></li>
<li>Online Fire & Safety Exam</li>
</ul>
the sub menu is hidden behind the ul. How can it be shown above the ul. The twoColumns class gives css property columns:2 which makes the list appear in two columns. When i hover on "welcome list" the sub menu goes behind the second column of the list. Please help.
Try something simpler, see this fiddle.
<div id="navbar">
<ul id="dropdown">
<li class="topnav">ITEM ONE
<ul>
<div class="column">
<li>Subitem One</li>
<li>Second Subitem</li>
</div>
<div class="column">
<li>Subitem One</li>
<li>Second Subitem</li>
</div>
<div class="column">
<li>Subitem One</li>
<li>Second Subitem</li>
</div>
</ul>
</li>
</ul>
</div>
Does it makes sense for you?
.submenu{position:relative;}
.submenu .dropdown-menu{position:absolute;z-index:999;}
Hope it will work, if not please share your css also to find out the issue
How do I align the bootstrap navbar drop-down? The drop down always starts from the right corner, is it possible to set the starting point for the drop-down.
Here is the fiddle.
Both the menu when I click always starts from the right. Is it possible to move the first menu drop drown to some margin left? The drop down should start from the menu where its clicked rather than from entirely right.
Add this CSS
CSS
.navbar .nav>li {
position: relative;
}
DEMO
Not sure why you are using Bootstrap 2.1, but you are missing .dropdown class on your <li> which suppose to have dropdown.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
How do I increase the width on the twitter bootstrap dropdown menu. I need the list to have Alcohol Incidents and Status Reports as an option but the default width is not large enough to encompass that much text.
<li class="dropdown subnavbar-open-right">
<span>Reports/Statistics</span><b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>USN</a>
<ul class="dropdown-menu">
<li><a>Alcohol Incidents and Status Reports</a></li>
</ul>
Looking at the code you provided I made a test page using Twitter BootStrap's default set up and added your text "Alcohol Incidents and Status Reports" into the drop down menu. What I found is the drop down menu auto expanded to include the entire width of the text.
This means that either you have left some code out necessary for this to work correctly or you overriding CSS classes causing it not to work. Here is the code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Alcohol Incidents and Status Reports</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
If this does not help you then you may want to provide more of your code so people can help you debug. I have a link to JSFiddle but it seems that we are not allowed to post those links now. Well here its extension /tS95X/1/ if you want to look it up.