I am having a bootstrap dropdown. It works fine, but when I am inside a page accessed through the menu, then it gets weird:
http://2.bp.blogspot.com/-vw49cpP7weo/UZw0Jh_zmhI/AAAAAAAACJc/oadR5CTIus0/s640/dropdown.png
You can see in the picture, the menu is displaced to the right.
I paste the code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"><i class="icon-chevron-right"></i> Zimil Ltda</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li>Inicio</li>
<li>Quienes somos</li>
<li class="active" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="jubilados.html">
Productos <i class="icon-caret-down"></i></a>
<ul class="dropdown-menu">
<li>Préstamos a jubilados</li>
<li>Préstamos CBU</li>
<li>Otros créditos</li>
</ul>
</li>
<li>Trabajá con nosotros</li>
</ul>
</div>
</div>
</div>
Just pull-right dropdown-menu worked for me.
EDIT:
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
.pull-right has been deprecated as of Bootstrap 3.1.0
use
.dropdown-menu-right
See http://getbootstrap.com/components/#dropdowns-alignment
As tested on version 3.3.2 of bootstrap, dropdown-menu-right does not work for me either. Here's what I did to fix it in my case.
Instead of:
<ul class="dropdown-menu dropdown-menu-right">
I used:
<ul class="dropdown-menu" style="right: 0; left: auto;">
Works perfectly.
Try adding this to your css file or as style element this:
.dropdown-menu { left:auto; }
I had a similar problem with displaced drop-down and this worked for me.....
Change:
<ul class="nav pull-right">
to
<ul class="nav pull-left">
OR just remove the helper class pull-right leaving only the nav class:
<ul class="nav">
Here's a JS Bin demo: http://jsbin.com/ezuray/1/
Related
I have a simple sticky navbar that I am trying to put menu items on the left, center and right side. I found the bootstrap documentation with the navbar-right and navbar-left. Both of those work great, however if I want something to be in the middle I can't find a term/variable in the bootstrap library that does that. I have also tried adding align="center" to the li and a tags. Is there something specific I can call to center menu items in a bootstrap nav, or do I have to edit in manually with css align?
<!-- Fixed navbar -->
<nav class="navbar navbar-default 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>
<a class="navbar-brand" href="#"> pushed left by default? </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar" align="center">
<li class="active">pushed left by default?</li>
<li>center this part </li>
<li>and this too </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right </li>
<li> right</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I posted this link as a duplicate - Center content in responsive bootstrap navbar, but realized the answer does not work correctly with navbar-right.
Try creating/adding a navbar-center class on the navbar-nav that you want centered.
<ul class="nav navbar-nav navbar-center" align="center">
<li class="active">pushed left by default?</li>
<li>center this part </li>
<li>and this too </li>
</ul>
Then add the following CSS:
.navbar-center {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
JSFiddle Here
In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class like <ul class="dropdown-menu pull-left" role="menu"> with my code, but it doesn't work. anyone has an idea how to do this ?
Here is my code
<!-- Static navbar -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li><a id="Home" href="index.html">Home</a></li>
<!-- Visa drapdown-->
<li class="dropdown">
My Menu <span class="caret"></span>
<ul class="dropdown-menu pull-left" role="menu">
<li>Menu Item 01</li>
<li>Menu Item 01</li>
<li>Menu Item 02</li>
<li>Menu Item 03</li>
<li>Menu Item 04</li>
<li></li>
</ul>
</li>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
for Twitter Bootstrap 3
<div class="dropdown-menu pull-right">
<!-- write your code here -->
</div>
hope it helps :)
For Bootstrap 3.1.0 or above use .dropdown-menu-left or .dropdown-menu-right to display the drop down menus right or left side of the parent menu. In your case try following.
<li class="dropdown">
My Menu <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<!-- write your code here -->
</ul>
</li>
Bootstrap is BEST
Adding this style element to the dropdown <ul> will align the dropdown to the left side of the menu item:
left:0;
See this Bootply which targets the .dropdown-menu.pull-left and adds a left:0;.
This should solve your problem.
Update
I see that Bootstrap has deprecated pull-right and pull-left as of Bootstrap 3.1.0. Use dropdown-menu-left class to use built-in Bootstrap css to align the dropdown on the left edge so you don't need extra CSS. See this updated Bootply
As the answers given above are too old, would like to provide working solution for Bootstrap 3.3.7.
Use the given css on your .dropdown-menu div :
.dropdown-left-manual {
right: 0;
left: auto;
padding-left: 1px;
padding-right: 1px;
}
Explaination :
"right:0;" to make then ending of menu inline with end of dropdown
button.
"left:auto;" to override the left:0 given in dropdown-menu
class by bootstrap.
paddings are used to correct hovers on menu item, can be ignored.
Change navbar-right to navbar-left and add a pull-right class to the UL.
<ul class="nav navbar-nav navbar-left text-uppercase pull-right">
Check out the JSfiddle for an example.
http://jsfiddle.net/eqcpLj6k/1/
For Bootstrap 4:
There are CSS classes named: .dropup, .dropright and .dropleft.
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Source: Bootstrap
For a dropdown item that has been floated to the right of the screen, with its dropdown content flowing over the screen, just add the below code to prevent the content of the dropdown from flowing over the screen.
right: 0;
Is it possible to create the toggle button without using all the markup for default navigation?
I just want to create simple menu with the collapse feature. For example:
<div class="navigation">
<ul id="nav-to-collapse">
<li></li>
<li></li>
<li></li>
</ul>
<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">
</div>
Would this be possible? Its my first time using Bootstrap (3) and Its really confusing. I dont want to use all the navbar classes because then I would have to overwrite all the navbar styles just to create simple menu that I want.
EDIT: I managed to create the toggle without all the useless navbar classes but there is an issue with the toggle animation, when nav height is changed. Here is a jsfiddle to ilustrate the problem: Jsfiddle demo
Bootstrap's toggle function is a javascript function that is triggered when the user clicks the element with an attribute of data-toggle="collapse". If there is not also a data-target="" id specified, then the element that the user clicks is collapsed. However, in this bit of markup:
<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">
The data-target="" attribute is set to the id of #nav-to-collapse. So Bootstrap's collapse plugin is going to look for an id="nav-to-collapse" and trigger its function on that id.
So in this markup:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The data-target is set to the class of .navbar-collapse, which will make everything underneath that element collapse.
Fixed the collapse animation issue by using min-height instead of height on the nav element. Here is a fiddle: http://jsfiddle.net/cfcZY/2/
nav { min-height: 100px; }
I have markup defined in the page as below:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-pills">
<li class="active">Home
</li>
<li>Companies
</li>
<li>Help
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="breadcrumb">
<li>Home
</li>
<li>About
</li>
<li class="active">Help
</li>
</ul>
</div>
</div>
When the page renders the breadcrumb hides behind the navbar. Any bootstrap way of fixing it? Or is this a bug?
Ps: jsFiddle : http://jsfiddle.net/KNsYt/2/
It is clearly defined in bootstrap documents itself as below:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
So, give 50 or more pixels of padding to the body to solve the issue. check this fiddle.
Make sure to include this after the core Bootstrap CSS.
body {
padding-top:60px
}
I'm trying to center the "content" on navbar. When it is "navbar-fixed-top" the UL menus are centered. However, since I don't want to fix the menu to the top I remove that class but now menus are not centered.
It is floating to the left side. It should be aligned to the margins of the container.
Similar as http://twitter.github.com/bootstrap/scaffolding.html but I don't want it to be fixed to the top.
This is the code
<div class="navbar ">
<div class="navbar-inner">
<div class="container" >
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Use navbar-static-top.
Check out the latest bootstrap version if it doesn't work.
This used to be the default behaviour, at least it worked in 2.0.1, but it seems there has been some changes in the latest versions so that the navbar content is no longer centered when the navbar is not fixed.
The workaround seems to be to add the following to your CSS:
.navbar-inner > .container { width:940px; }