I have some things in a <ul>, but I need the last one to be all the way to the right. How do I put it there? (I need the dropdown to move to the right.)
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></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>
Split it into two navbars: one that is on the left and one that is floated right with pull-right:
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
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>
</ul>
Check out the example from Bootstrap's example site: http://examples.getbootstrap.com/navbar-fixed-top/index.html
<div class="container">
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
<!--// add a class of .pull-right //-->
<li class="dropdown pull-right ">
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>
</div>
DEMO
relatively new to HTMl and CSS, but I solved a similar problem without having to make a duplicate menu bar. Simply 'float: right;' in the tage you want to appear on the right. (Best to have them as the last elements to maintain logical order.)
for example
Action
becomes
Action
Repeat this for any elements you want on the right hand side. It will overwrite the defined float:left default.
Dropdown
Action
Another action
Something else here
Nav header
Separated link
One more separated link
Related
I am using the following code as navbar, and starts well from the right side, however the sorting of the menus is ltr and it should be rtl, meaning "Dropdown 1" starts from the right side of the page.. etc.
It shows as:
And it should be:
I tried adding float: right but it is already implemented in the bootstrap css, and also dir="rtl" in the html/body/divs.. but no luck.
Also I would like to now which #media option in the css that makes the menu invisible with smaller screens, as IUI tried to add #media (min-width: 200px !important) as a css, but still the menu gets hidden in smaller frames (I think from bootstrap.min.css file: #media (min-width: 768px)).
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdown Hover</title>
<!-- Bootstrap core CSS -->
<link href="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Dropdown Hover CSS -->
<link rel="stylesheet" href="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap-dropdownhover/css/animate.min.css">
<link rel="stylesheet" href="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap-dropdownhover/css/bootstrap-dropdownhover.min.css">
</head>
<body>
<div class="bs-demo-showcase">
<nav class="navbar navbar-material-blue navbar-fixed-top" role="navigation">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-animations" data-hover="dropdown" data-animations="fadeInDownNew fadeInRightNew fadeInUpNew fadeInLeftNew">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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>
<li class="dropdown">
Dropdown 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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>
<li class="dropdown">
Dropdown 3<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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>
<li class="dropdown">
Dropdown 4<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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 -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap-dropdownhover/js/bootstrap-dropdownhover.min.js"></script>
</body>
</html>
P.S. the above snippet will work well by showing the code in "Full page" option, or through jsfiddle (enlarging the results frame): https://jsfiddle.net/gtfmbc54/1/
Add to your css file
.nav {
direction: rtl;
display: flex;
}
.caret {
margin-right: 5px;
}
i overrided the css
.navbar-nav>li {
float: right!important;
}
.navbar-collapse.collapse{display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
visibility: visible!important;}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Dropdown Hover</title>
<!-- Bootstrap core CSS -->
<link href="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Dropdown Hover CSS -->
<link rel="stylesheet" href="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap-dropdownhover/css/animate.min.css">
<link rel="stylesheet" href="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap-dropdownhover/css/bootstrap-dropdownhover.min.css">
</head>
<body>
<div class="bs-demo-showcase">
<nav class="navbar navbar-material-blue navbar-fixed-top" role="navigation">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-animations" data-hover="dropdown" data-animations="fadeInDownNew fadeInRightNew fadeInUpNew fadeInLeftNew">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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>
<li class="dropdown">
Dropdown 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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>
<li class="dropdown">
Dropdown 3<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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>
<li class="dropdown">
Dropdown 4<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<li class="dropdown">
Another dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Another action</li>
<li class="dropdown">
Another dropdown <span class="caret"></span>
<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>
<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>
<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 -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://kybarg.github.io/bootstrap-dropdown-hover/assets/bootstrap-dropdownhover/js/bootstrap-dropdownhover.min.js"></script>
</body>
</html>
I'm having a problem with the text-center class of bootstrap not working, here is it.
I have a div that contains several list and other tags, but when I apply the text-center class to make this center on the screen it does nothing, this applies also in a div that contains divs in shapes, here is my code:
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Asignación <span class="caret"></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>
</ul>
</li>
<li class="normal-li">Ver por: </li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Solicitud</label></li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Producto</label></li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
As you can see my div with class options-bar is the one that contains the rest, but the class text-center does nothing.
Here is my css stylesheet for options-bar:
.options-bar {
line-height: 50px;
width: 100%;
}
You may use this for centering div's. Add the below code to the div that you want to center.
.centered {
margin: 0 auto;
}
Note: Usually div's occupy entire width(since its a block element). Make sure that the div which you want to center has width lesser than the screen width. Otherwise you may not see any difference.
You can set the .nav.nav-pills li items to flex-grow: 1; which will cause all the list items to expand equally to fill the space. See this fiddle for an example. I also added a snippet below, but it only looks right in full-screen.
.options-bar {
line-height: 50px;
width: 100%;
}
.nav.nav-pills li {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></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>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Asignación <span class="caret"></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>
</ul>
</li>
<li class="normal-li">Ver por: </li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Solicitud</label>
</li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Producto</label>
</li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
Try this css class in your divs:
.vertCenter {
display: flex;
justify-content: center;
align-items: center;
I'm trying to add offcanvas to my bootstrap navigation, the responsive works perfectly but the dropdown menu doesn't work when i try the desktop resolution.
The problem seems to be the "bootstrap.offcanvas.js".
When I delete the "bootstrap.offcanvas.js", it works.
Any idea to resolve this problem?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container menu-height">
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<object width="98px" data="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" title="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="image/svg+xml"></object>
</div>
<!--/.navbar-header -->
<div class="navbar-offcanvas" id="js-bootstrap-offcanvas">
<ul class="nav navbar-nav">
<li class="dropdown">
xxxxxxxxx <b class="caret"></b>
<ul class="dropdown-menu" >
<li>xxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxxxxxx<b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxxx</li>
</ul>
</li>
<li class="dropdown">
xxxxx <b class="caret"></b>
<ul class="dropdown-menu">
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
<li class="divider"></li>
<li>xxxxxxx</li>
<li class="divider"></li>
<li>xxxxxx</li>
</ul>
</li>
<li class="responsive-online-shop"><div class="box-online-shop"><a class="nav-link btn btn-secondary-outline btn-secondary" href="xxxxxx">xxxxxx</a></div></li>
<li><div class="box-online-flag"><object data="xxxxxxxxxxxxx" type="image/svg+xml"></object><span class="flag-responsive hidden-lg">xxxxxxx</span></div></li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Another Link <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>
<li class="dropdown">
Another Link <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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
</header>
nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch" role="navigation" id="js-bootstrap-offcanvas">
Brand
Link
Link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Another Link
Action
Another action
Something else here
Separated link
One more separated link
Submit
Link
Another Link
This Question is related to Bootstrap dropdown clipped by overflow:hidden container, how to change the container? .
The solution provided works fine if there is a single dropdown. but what if multiple dropdowns are listed?
.bs-example,
.bs-example1 {
height: 50px;
border: 1px solid black;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
}
.bs-example .dropdown {
position: absolute;
}
.bs-example1 .rates-nav {
position:relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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.6/js/bootstrap.min.js"></script>
<div class="bs-example">
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</div>
<div class="bs-example1">
<ul class="list-unstyled list-inline rates-nav">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Check this fiddle http://jsfiddle.net/ravimallya/y3abqjo9/
How can I make the dropdown visible having the overflow and white-space as it is for it's parent? I tried position:absolute for .rates-nav but it's not working. I'm using angularjs to populate rates-nav
Here is link of jsfiddle:
https://jsfiddle.net/priyanshbhaliya/43tyokm2/
this change
.bs-example1 .rates-nav {
position:absolute;
}
I am a new web designer and I am struggling right now in designing a responsive navbar in bootstrap with the proper icons. Could you please tell me which icons I should use for the following menu options?
Here's my HTML Code:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home</a></li>
<li>Services</li>
<li>Time Series</li>
<li>Profile</li>
<li>Place Order</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Admin <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>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
First time I see a request like this .. You're the designer, you should do whatever you want and don't need advices from others.
But since you asked it, here something you could start with : http://www.bootply.com/jePKaJ3ebg
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><i class="glyphicon glyphicon-th"></i> Services</li>
<li><i class="glyphicon glyphicon-calendar"></i> Timeline</li>
<li><i class="glyphicon glyphicon-user"></i> Profile</li>
<li><i class="glyphicon glyphicon-inbox"></i> Place a Request</li>
<li><i class="glyphicon glyphicon-question-sign"></i> FAQ</li>
<li><i class="glyphicon glyphicon-info-sign"></i> About</li>
<li><i class="glyphicon glyphicon-envelope"></i> Contact</li>
<li class="dropdown">
<i class="glyphicon glyphicon-wrench"></i> Admin <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>
<li class="dropdown">
<i class="glyphicon glyphicon-bullhorn"></i> Support <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
And as I commented, you could use Font Awesome Icons to get a wider catalog, and IMO they are better designed than Bootstrap's glyphicons.