How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar
Explanation
Bootstrap's adds position: absolute
to the .dropdown-menu
class. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find with position: relative
. In Bootstrap, this is provided by the .dropdown
wrapper
So if you want to position the element relative to the container, and not the nav item, we'll have to remove relative positioning from the .dropdown
wrapper. You can do this by resetting the value to the initial value for the position
property, which is static
.
Congratulations! The menu is no longer constrained by the .dropdown
element, but we still have some work to do.
Because bootstrap was not intending to space constrain the menu, menu items are given the property white-space: nowrap
so they'll extend as long as they need. Think lines of code inside code blocks here on stack overflow (1 line = 1 line). Since we want the line to eventually end, this won't do. So we'll reset the anchor tags back to white-space: normal
.
At this point the .dropdown-menu should take up the full size of the .navbar (which itself takes up the full size of the .container
). This is where yamm3 is doing something really cool. It sets left: auto
on the dropdown-menu.
According to MDN on the left property:
auto
is a keyword that represents:
for absolutely positioned elements, the position of the element based on theright
property and treatwidth: auto
as a width based on the content.
So setting the .dropdown-menu
to left:auto
will cause the menu to start in its current location and extend all the way to the right of the container.
Just Codes
Just add the .fill-width
class to your .dropdown
element and include the following CSS:
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
Working Demo in jsFiddle
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
right: 0;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<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="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown fill-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
How to set width on dropdown item in bootstrap?
There is a min-width on the dropdown menu in bootstrap.
You can reset it like this:
.dropdown-menu {
min-width:inherit;
}
Bootstrap 3 Dropdown full width
Remove position: relative
from the dropdown parents and make it relative for the full width bar. Position Relative makes any absolute children use that as it's positioning reference point.
If you add the following to the bottom of the CSS you'll get the effect you need.
.categorydropadjust, .dropdown {
position: static;
}
.container-fluid {
position: relative;
}
.dropdown-menu {
width: 100%;
}
https://jsfiddle.net/gswna389/3/
How to make this dropdown menu full width underneath the navbar?
I dont know exactly what you need if my thought is right you want this link , check with the bootstrap mega menu
click here
bootstrap navbar list dropdown extends far too wide
If you don't want to give a fixed width, then you may use max-width
.
It will not set any fixed width but when the text will exceed the given max-width
, it will automatically break down to a new line.
How to reduce the width of dropdown-menu?
.dropdown-menu
has min-width: 160px;
and min-width
overrides width
so you can not change width
you can use min-width
instead of width
.
.dropdown-menu { min-width: 60px !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a> </li> <li><a href="#">Another</a> </li> <li><a href="#">Something</a> </li> <li><a href="#">Separated</a> </li> </ul></div>
How to make width of dropdown-menu equal to width of it's parent in bootstrap 4
dropdown-menu has position:absolute
property. So, adding width:100%;
will make the dropdown-menu to take full width of the page instead of taking full width of container. To make the dropdown-menu take the width of it's parent element make the parent element's positioning relative. To solve the problem first Add class="position-relative"
attribute to the parent element of dropdown-menu. Now add w-100 to the class attribute of the dropdown-menu div.
<div class="container position-relative">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu w-100">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
Related Topics
Google Chrome Showing Black Border on Focus State for Button User Agent Styles
How to Centre Absolutely Positioned Content of Unknown Width
Expand Container Div with Content Width
What Is the Purpose of Using Font: Inherit
Center a Row Using Bootstrap 3
CSS How to Use Pseudo-Class :Not with :Nth-Child
Css3 Transition Only When Class Is Added, Not When Removed
How to Create a Pulsing Glow Ring Animation in CSS
Realtime CSS/Scss Edition with Meteor Avoiding Server Restart
Getting Width of a Div Element
Angular2 Material Dialog CSS, Dialog Size
Can You Overlay a Transparent CSS3 Gradient Over a Background Image
CSS - How to Get Rid of the Selection Rectangle After Clicking a Link
Understanding the Difference Between the Flex and Flex-Grow Properties
Positioning Svg Elements Using CSS
Is There a Maximum Length for the Class Name in CSS