Bootstrap: Position of dropdown menu relative to navbar item
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Before v3.1.0
You can use the pull-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/
After v3.1.0
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.
You can use the dropdown-right class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/
Bootstrap 4
The class for Bootstrap 4 are the same as Bootstrap > 3.1.0, just watch out as the rest of the surrounding markup has changed a little:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
Link
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">...</a>
</div>
</li>
Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/
Bootstrap 5
Again, very similar for Bootstrap 5 except now it's dropdown-menu-end
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
Link
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">...</a>
</div>
</li>
Fiddle: https://jsfiddle.net/joeczucha/psnz2u36/
How to force a bootstrap dropdown to position to another element
The reason why the dropdown will appear right below the triggering element when you click it is because the triggering element has relative positioning and the dropdown menu has absolute positioning and 100% top and 0 left, which will push the dropdown menu down and align its left to the triggering element.
Let's say we have a class called .mega-menu that transforms a regular dropdown menu to a mega menu, and we have a structure like the following:
<li class="nav-item dropdown mega-menu">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Dropdown 2
</a>
<div class="dropdown-menu">
<div class="container-fluid">
<div class="row flex-grow-1">
<div class="col-md-6">
<div class="jumbotron">
<h2>
Hello World!
</h2>
<p>
Welcome to our mega menu!
</p>
</div>
</div>
<div class="col-md-6">
<h3>
Feature 1
</h3>
</div>
</div>
</div>
</div>
</li>
If you want the dropdown menu to align with the container and take up its full width, the first thing you would need to do is to get rid of the relative positioning on the triggering element so that the dropdown menu won't be restricted just under the triggering element.
You might wonder where it will be absolute from if it doesn't have a relative parent anymore. Luckily all the way up to the navbar, <nav class="navbar" /> has relative positioning! That's perfect!
.dropdown.mega-menu,
.dropleft.mega-menu,
.dropright.mega-menu,
.dropup.mega-menu {
position: static;
}
And then the only thing left is to set the left and right of the dropdown menu to 0 so that it will align to the container. To make it look nicer, you can have a negative margin-top so that the menu's top border will merge into the navbar:
.dropdown.mega-menu,
.dropleft.mega-menu,
.dropright.mega-menu,
.dropup.mega-menu {
position: static;
}
.mega-menu .dropdown-menu {
left: 0;
right: 0;
margin-top: -1px;
}
The mega menu should be good to go!
If you want to put .container-fluid inside the mega menu, there is one more thing you need to do: put flex-grow-1 or w-100 on any row there:
<div class="dropdown-menu">
<div class="container-fluid">
<div class="row flex-grow-1">
<div class="col-md-6">
...
I am not sure if this is a bug or not though, but you do have to do that in order to have the rows take up 100% width:
demo: https://jsfiddle.net/davidliang2008/y6a8qu2h/40/
Disclaimer: I didn't work on the dropdowns for mobile views.
Bootstrap 5: Dropdown menu go out off to the right of the screen
Make sure you are reading the correct documentation for the version you are using:
https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
You will see that v5 uses .dropdown-menu-end for a right-aligned menu.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Cat1</a>
</li>
<li>
<a class="dropdown-item" href="#">Cat2</a>
</li>
<li>
<a class="dropdown-item" href="#">Cat3</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign in</a>
</li>
</ul>
</div>
<!-- This is what is not working well -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
John Doe
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item dropdown" href="#"> Edit settings </a>
<a class="dropdown-item" href="#"> Edit profile page </a>
<a class="dropdown-item" href="#"> Show profile page </a>
<a class="dropdown-item" href="#"> Create profile page </a>
</div>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>How to position dropdown menu with bootstrap 4?
You can use the following solution, using auto-margins (.ml-auto):
<!-- css and js files --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- your code --><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item active dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div></nav>Bootstrap (4.0) dropdown in navbar cannot position right in relation to viewport
Dropdown parent should have .navbar-nav in a navbar to correctly worked as it written here : https://getbootstrap.com/docs/4.0/components/navbar/#supported-content
dropdown-menu occupies new space instead of relative position
Add position: absolute; and set it's top and left relative to parent div for dropdown-menu. Also, add z-index to display it on the top of other elements (it sets the stack order).
By setting position: absolute; your dropdown-menu container position is set relative to its closest positioned ancestor. Make sure you it's parent div which is dropdown position is relative (not set to static).
How to align dropdown menu in Navbar in Bootstrap with css?
Have you checked to see if there is a top margin? Try setting margin-top:0 as well.
.dropdown{
margin-top: 0px;
}
You should open up your browsers developer tools and select the element inspector to see what CSS property is pushing down the dropdown.
You can also pull up the dropdown using the position:relative CSS property along with a top:-5px but this is not a good solution because you are better off finding the real cause of what is pushing down the element.
I would also recommend not editing the .dropdown class globally and adding an additional class like so.
<li class="someclass dropdown">
that way you can edit the CSS as shown below and no effect other dropdowns you may add to the page content.
.someclass.dropdown{
margin-top: 0px;
}
Hope this helps.
bootstrap4 dropdown in navbar pushes and moves nav-items
Demo: https://jsfiddle.net/b23catgp/
Explanation:
You needed to change the css property position from static to absolute. I've included a good link about the difference but to summarize...a static positioned element is based on its current position in the flow while an absolute positioned element is positioned based on its closest positioned ancestor position.
The dropdown when active since it was static was pushing over the rest of the nav-items in your navigation. You didn't want this behavior so to have the other elements fill in where the dropdown would have filled in space you have to give it absolute position.
What you have to add to your existing code:
/* New */
.dropdown-menu {
position: absolute !important;
}
Additionally, in the demo above I added back in the 'dropdown-toggle' class to the button and it's working fine.
Related Topics
CSS Opacity and Child Elements
Bootstrap Change Order of Columns
Any Way to Remove Ies Black Border Around Submit Button in Active Forms
How to Change Only the Alpha of a Rgba Background Colour on Hover
Drawing Border Colors During a CSS Transition
Symfony2 - Assetic - Load Images in CSS
How to Reverse the Order of Columns in Bootstrap 4
Scrollbar Color Change in Firefox
Hover on Child Without Hover Effect on Parent
How to Reset a CSS Variable (Aka Custom Properties) and Use the Fallback One
How to Make a Circle Around Content Using CSS
Animating Max-Height with CSS Transitions
Display:Inline Resets Height and Width
Vertically Centering Content of :Before/:After Pseudo-Elements
I Cannot Change the Font Size of Package Explorer in Eclipse