I've been having some issues with getting a dropdown to be horizontal (and 100% width of the column). I have tried a lot of pieces of code and of course adjusted a ton of things, but have not been able to get this done yet.
Please keep in mind of the following:
Using Bootstrap V3.3.7
Make sure to use nav-tabs (not normal navbar)
It should only be 100% of the width of the column
I hope someone is able to help me out with this.
Regards,
Siranix
EDIT: As requested, here's a bootply try / my code: Bootply
I think you need to remove position: static; , Please let me know is that what you want.
.nav > li.dropdown.open {
}
.nav > li.dropdown.open .dropdown-menu {
display:table;
width: 100%;
text-align: center;
left:0;
right:0;
}
.dropdown-menu>li {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li class="active">General </li>
<li class="dropdown"><a data-toggle="dropdown" aria-expanded="true" href="#" class="dropdown-toggle"><i class="fa fa-users"></i> Example Dropdown<span class="caret"></span></a>
<ul role="menu" class="dropdown-menu suf-ver-tabdropdown">
<li role="presentation">First Item</li>
<li role="presentation">Second Item</li>
<li role="presentation">Third Item</li>
</ul>
</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
Related
For a filetree that is dynamically generated, I set the width to 360px and a scroll on the x.
I know, the syntax is not correct, (nested ul should be in li ) but I am still wondering why the hhhhh in code below is not at the right side of the |- but under it. And the iiiii and further also...
.tree {
width: 360px;
overflow-x: scroll;
}
.li-tree {
list-style: none;
}
<div class="tree">
<ul class="ul-tree">
<li class="li-tree">|-<span>aaaaa</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>bbbbb</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ccccc</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ddddd</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>eeeee</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>fffff</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ggggg</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>hhhhh</span></li>
<ul class="ul-tree">
<li class="li-tree">|<span>iiiii</span></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
You can see in the fiddle that hhhhh is not right of the |- anymore, but under it: https://jsfiddle.net/a9fudsb6/5/
Its because of your width there is no space for your tree.
If you change it e.g. to
width = 400;
it appears inside.
If you want to keep your width, add the following:
.tree {
width: 360px;
overflow-x: scroll;
white-space:nowrap; // that one here
}
While using Bootstrap 3 with custom font in navbar the position of carot doesn't remain vertically aligned with text.
I'm not using any custom classes - just li elements with .active and .dropdown respectively, only font-family was changed. I guess that the issue has to do with font's height itself.
How can I fix this issue without hacking carot's position? I'm building Bootstrap with LESS, so if there are any relevant variables corresponding for something like basic font height (or maybe line-height?) let me know.
Edit: Providing code example (just an ordinary navbar)
<nav class="navbar navbar-default">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown">
Link <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The caret already has a class in bootstrap. I would recommend using that for positioning.
.caret {
display: inline-block;
width: 0;
height: 0;
margin-top: -10px;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
You can put the caret in a span:
<li class="dropdown">
<a class="dropdown-toggle" style="font-size: large" data-toggle="dropdown" href="#">HasDropdowns<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
I'm using bootstrap 2.3 for menu links
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li class="active">My profile</li>
<li>Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Is it possible to place two links (My profile and edit) in one line by using bootstrap like showed on picture or any other way to do it. Thanks.
You can achieve this with just CSS, using the nth-child selector. It is still responsive.
li:nth-child(1), li:nth-child(2) {
display:inline-block;
}
DEMO: http://jsfiddle.net/z5pXh/3/
nest another ul inside and a little additional css
CSS
ul.nav-edit {
margin-bottom: 0;
}
ul.nav-edit li.active {
display:inline-block;
width: 88%;
}
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li>
<ul class="nav nav-pills nav-edit">
<li class="active">My profile</li>
<li class="pull-right">Edit</li>
</ul>
</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Check out the fiddle at http://jsfiddle.net/Y2LUZ/
Live Demo
If fixed sizes are good for you, you can use this:
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked pos-rel">
<li class="col-first active">My profile</li>
<li class="col-second">Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
CSS
.pos-rel {
position: relative;
}
.col-first {
width: 300px;
}
.col-second {
position: absolute;
top: 0;
left: 305px;
}
I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!
No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle
Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>
I have designed a bootstrap navbar with dropdown menu
http://jsfiddle.net/yabasha/fex8N/3/
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
}
Is there a way to change the default alignment for the dropdown-menu (from left to center / right) so the arrow would display in center / right?
It's better to avoid the use of px for positioning, since the dropdown´s width may change. This would be more appropriate for centering the caret:
.navbar .nav > li > .dropdown-menu.pull-center:after {
left: 50%;
margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
left: 50%;
margin-left: -7px;
}
For right alignment, you just need to add the class pull-right to the dropdown:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<!-- your menu -->
</ul>
</li>
JSfiddle with your example http://jsfiddle.net/shail/fex8N/5/
change the following code to your liking to center the drop down caret :
.navbar .nav > li > .dropdown-menu:after {
left: 83px; /change to your liking/
}
.navbar .nav > li > .dropdown-menu:before {
left: 83px; /keep values in after and before same /
}
To align the li elements to the right side :
.dropdown-menu > li > a {
text-align:right;
}
To align the li elements to the center :
.dropdown-menu > li > a {
text-align:center;
}
I have implemented this in my project and have answered in below link.
https://stackoverflow.com/a/21849528/2026261.
<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;">
<ul class="dropdown-menu" role="menu">
<li>Write Post</li>
<li>Posts List</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label>
<span class="caret" data-toggle="dropdown"></span>
</div>
In this way you can align menu to left or right according to your choice.