I want to pull right icon glyph in drop down menu like as below
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right pull-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>Another action</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
But when I run this code on FireFox (Chrome and IE are oke), "icon-arrow-right" and "2-level Dropdown" aren't same a line . How can I fix it ?
Full code on JSFIDDLE
<a href="#" style="overflow: hidden;">
<span class="pull-left">2-level Dropdown</span>
<span class="icon-arrow-right pull-right"></span>
</a>
jsfiddle
The solution from cetver works well for me.
For the record though, here's another way to get the same results:
http://www.bootply.com/70536
HTML
<i class="icon-arrow-right"></i> 2-level Dropdown
CSS
.icon-arrow-right {
float: right;
margin-top: 2px;
margin-right: -6px;
}
Related
I have this kind of dropdown in boostrap 3
<li class="dropdown"> <i class="fa fa-camera-retro fa-2x"></i> Dashboard
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
The problem is here that txt gone right to the icon, i want to text stay under the icon in the middle, and icon also in the middle at top of the text, when i add long text under the icon thta all stay in the middle
Here is working bootply
http://www.bootply.com/ZhwSteTLgw
What i need is this
But whne i add long txt all to stay in the middle?
UPDATE
Solution
<i class="fa fa-camera-retro fa-2x"></i><span class="show">Dashboard</span>
ul > li > a
{
text-align:center;
}
Try this:
DEMO
<li class="dropdown">
<a style="width:auto" href="#" class="dropdown-toggle col-md-12 text-center" data-toggle="dropdown">
<i class="fa fa-camera-retro fa-2x col-md-12 "></i> <p class="col-md-12 ">Dashboard</p></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown" style="display: table-caption;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="margin-left: 18PX;">
<i class="fa fa-camera-retro fa-2x"></i> Dashboard</a>
<ul class="dropdown-menu" style="">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
CHECK THIS
Here is a link to my markup, which is 100% relient on Bootstrap:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-align-justify menu-icon"></span>
</a>
<ul class="dropdown-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>
<ul class="nav navbar-nav navbar-right" style="margin-right: 6px;">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user user-icon"></span>
<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>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
On codepen: http://codepen.io/dsparry/pen/qEJen
You'll see when you make the window small, the right icon jumps down below the left icon and makes the navbar larger.
I want the navbar and icon position to stay the same when the window is resized. In other words, I don't want anything to change. I've tried to override Bootstrap with custom CSS but haven't been able to figure it out.
Any ideas? What CSS should I include to prevent the icon from jumping down when the window is resized?
you have 2 ul
add classes to first ul : col-xs-6
add classes to second ul : col-xs-6 text-right pull-right
edit: that will break your layout.
You should have one UL with the intended right aligned li with pull-right at the first of the list like :
<ul class="navbar ...">
<li class="pull-right ...">
<li></li>
</ul>
You can get help better if you do a jsfiddle
I am trying to add 4 navigation buttons at right side. On Clicking which I would be able to navigate to respective divs in the same page.(just like a single page design).
I am adding following lines of codes to create 4 navigation buttons at right side of the page.
<div data-spy="affix" class="offset8 span1 well offset7 small">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot.
Which bootstrap classes can be used to make it place at extreme right side and those should be fixed in position. (responsiveness should be well taken care of).
you can use .navbar-right and also add position: fixed; right: 0;.
that should do the trick
You actually need to use navbar-right, as I found out from here and used in my code:
<div class="navbar-collapse collapse navbar-right" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu pull-right" role="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>
</div><!--/.nav-collapse -->
HTML
<div data-spy="affix" class="offset8 span1 well offset7 small nav">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
CSS
.nav {
position: fixed;
float:right;
margin-right: 0px;
}
I tried this method (their fiddle) to enable scrollable menu with Bootstrap, but with that approach, the scrollable menu expands its container -- fiddle -- the non-scrollable menu, correctly, does not do this.
How can I fix this? Suggestions on other approaches compatible with Bootstrap are appreciated too!
For reference, here is the HTML from the first method's fiddle:
<ul class="nav">
<li class="dropdown">
<a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
"font-weight: bold"></a>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 1 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-group"></i> <b>My Groups</b>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
User
</li>
<li>
Administrators
</li>
<li>
Some Other Group
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 2 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-user"></i> <b>My Roles</b>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
Core Users
</li>
<li>
Admin
</li>
<li>
Some Other Role
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu footer -->
</ul>
</div>
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i>
</li>
</ul>
</li>
</ul>
And the CSS:
/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
position:relative;
display:inherit!important;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-o-overflow-scrolling:touch;
overflow-scrolling:touch;
top:0!important;
left:0!important;
width:100%;
height:auto;
max-height:500px;
margin:0;
border-left:none;
border-right:none;
-webkit-border-radius:0!important;
-moz-border-radius:0!important;
-ms-border-radius:0!important;
-o-border-radius:0!important;
border-radius:0!important;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none
}
Bootstrap 5 (update 2021)
The dropdown markup has changed for BS 5 as the data- attributes have changed to data-bs-. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
https://codeply.com/p/shJzHGE84z
Bootstrap 4 (update 2018)
The dropdown markup has changed for BS 4 as the items have their own dropdown-item class. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
Bootstrap scrollable dropdown
Alternative horizontal menu for Bootstrap 4 using flexbox
Bootstrap 3 (original answer)
I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..
CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
HTML
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
Working example: https://codeply.com/p/ox7JC49vmT
You can use the built-in CSS class pre-scrollable in bootstrap 3 inside the span element of the dropdown and it works immediately without implementing custom css.
<ul class="dropdown-menu pre-scrollable">
<li>item 1 </li>
<li>item 2 </li>
</ul>
For CSS, I found that max height of 180 is better for mobile phones landscape 320 when showing browser chrome.
.scrollable-menu {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
Also, to add visible scrollbars, this CSS should do the trick:
.scrollable-menu::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
}
.scrollable-menu::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: lightgray;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);
}
The changes are reflected here: https://www.bootply.com/BhkCKFEELL
Do everything in the inline of UL tag
<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
I just fix this problem in my project-
CSS code
.scroll-menu{
min-width: 220px;
max-height: 90vh;
overflow: auto;
}
HTML code
<ul class="dropdown-menu scroll-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
i hope this code is work well,try this.
add css file.
.scrollbar {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
HTML code:
<div class="col-sm-2 scrollable-menu" role="menu">
<div>
<ul>
<li><a class="active" href="#home">Tutorials</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
I'm making a website using Twitter's Bootstrap and everything is almost set but I can't figure how to position a search bar into the main menu
Here is the website online
http://testings.coffeecup.com/index1.html
Each time I put it anywhere on the container it screws up either.
EDIT:
I managed to add it:
http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894
But I still can't position it on the right.
The css I'm using
.navbar-search {
position: relative;
}
.navbar-search .search-query {
float:right;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
background-image: url("");
}
Right after the <div class="navbar-inner"> include the search bar <input> with whichever attributes you need .. after just float it to the right and adjust the margins so its centered vertically in the nav-bar.
You have to add the search-bar inside <div class="navbar-inner"> and after <div class="nav-collapse collapse">.
The code for the search bar:
<input id="search" class="span3" type="search" name="search" placeholder="Search">
You can use the pull-right class
i used it in the container
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<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>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
REsult :