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>
Related
I could not find any information, why it is common to use anchor in list item in navbar?
<ul>
<li>One</li>
<li>Two</li>
</ul>
Even navbar in Bootstrap 3 is implemented in such way
<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>
Even now some HTML-coders use it and teach to do it.
Why should I use this awkward markup? Then I have to "clean" all browser-default styles for list-items list-style-type: none; and put inside each list item an anchor for navigation link?
What is wrong with this, below?
<div class="nav">
<span>One</span>
<span>Two</span>
</div>
<span> or <div> does not matter.
It is already 3 years of HTML5, what is wrong with this, below?
<nav>
One
Two
</nav>
Is it connected some-how with old browsers? If yes, give me a link to read what was wrong, please.
<div> and <span> is valid but not semantic since a navbar is essentially a list.
I usually use this approach:
<nav>
<ul>
<li class="navbar-item"><a href=#>placeholder</li>
</ul>
</nav>
This is both semantic and can be cleanly styled using css child selectors.
Because the lis (= "list items") list the available pages of that website. That's a semantic concept in HTML, its inherent logic works well mainly for accessibility on websites and for search engines (again: listing the pages of that website).
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 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
I need to make drop down for one <li> element
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li> </li>
<li> </li>
<li class="pull-right">More options
<ul class="dropdown-menu">
<li>one</li>
<li>two</li>
</ul>
</li>
<li class="pull-right">logout</li>
<div class="clearfix"> </div>
</ul>
</div>
but sub menu doesn't opens
using Bootstrap v3.1.1
NOTE : even adding after jquery also doesn't works
You have to use
<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>
In your code, you miss class "dropdown" for li tag.
For correct dropdown, you have to use this sintax:
<li class="dropdown">
Item Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
</ul>
</li>
You can refer the Bootstrap documentation here
The issue is causing by the missing of data-toggle="dropdown" in tag a
Maybe you search this solution: JSBin
For example:
You need add the content: attr(data-hover); on your before element.
HTML:
<li class="HOVER">More options
CSS:
.HOVER {
border: solid 7px #000;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
position: relative;
width: 300px;
}
.HOVER:hover a:before {
content: attr(data-hover);
color: red;
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
You're missing the the following attributes:
class="dropdown-toggle" data-toggle="dropdown"
and those attributes go on the element you want to be the "Hook" for the dropdown list.
Sample markup below:
<li class="dropdown">
<a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Edit
Here is an example Fiddle; notice how if you remove data-toggle="dropdown", the code won't work . :)
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.