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>
Related
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 working on a bootstrap template, I created a div class with a logo, but when I tight the window of chrome, the logo is up above the mobile menu.
My site (mobile version)
*What I want the mobile version of my site to look like**
My code:
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive" width="500px" height="100px">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></li>
<li class="dropdown">
<i class="fa fa-users" aria-hidden="true"></i> ATLETI<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">
<i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<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="active"><a href="#">
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> RISULTATI <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="active"><a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<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>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.logo
{background-color: #FFF;
height: auto;
width: 100%;
padding-bottom: 10px;}
.navbar
{margin-bottom:0px !important;
font-size: 12px;
: #000;}
If you want that your logo be inside your navbar, you should put your logo inside html code of the navbar.
Try to add this line inside your navbar header (and change img path):
<img src="path/to/your/image.jpg">
and add some classes to your extra logo div
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>
EDITED example :
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<img src="path/to/your/image.jpg">
<button type="button" class="navbar-toggle collapsed navbar-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></li>
<li class="dropdown">
<i class="fa fa-users" aria-hidden="true"></i> ATLETI<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">
<i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<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="active"><a href="#">
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> RISULTATI <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="active"><a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<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>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
I don't know, when this mobile view comes, so you have to edit the px. In my example the view is showed, when the width is below 720px.
#media (max-width: 720px) {
.logo{
width: 50%;
float: left;
}
.logo img{
width: 100%;
float: none;
}
}
And in the headtag of your html-file you have to add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 have a navbar with a couple of dropdowns. They have been modified to use a container to display 4 columns of dropdown content
Notice that for each dropdown on the navbar, the dropdown menu is not alligned with the container (gray area). I would like to have all dropdowns aligned with the container.
I tried absolute positioning this but it didn't work very well, and I'm wondering if there's a better bootstrap way of doing it?
code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">
Dropdown 1 <span class="caret"></span>
</a>
<div class="dropdown-menu">
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Dropdown 1 <span class="caret"></span>
</a>
<div class="dropdown-menu">
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Each your dropdown-menu contains <div class="container"> which has fixed width corresponding to screen size.
You should manually set container width: <div class="container" style="width:...">
Or create css class for each screen size <div class="container custom-width">:
#media (min-width: 768px) {
.custom-width {
width: ... !important;
}
}
#media (min-width: 992px) {
.custom-width {
width: ... !important;
}
}
#media (min-width: 1200px) {
.custom-width {
width: ... !important;
}
}
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