How to make a Bootstrap 4 full width dropdown in Navbar?
Use w-100 (width:100%) on the dropdown-menu, and make sure the parent .dropdown
is position-static to allow the menu to expand to full width...
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#" style="color: red;">LOGO GOES HERE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/0QHWWNsMyI
Alternative, set min-width in CSS:
https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width
Complex "mega menu" example
Bootstrap4 fixed-top full-width navbar with non-full-width dropdown-menu
I managed to approach your goal (if I understood right) applying mainly the next style to the dropdown-menu, but only on the specific bootstrap break-point (LG), and removing all of your style:
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
Also, I removed the outer row and col-12 and replaced the container by container-fluid, and make some minor changes to the items on the dropdown-menu so they look centered. You can check it below:
@media (min-width: 992px)
{
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-1">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-2" data-toggle="dropdown">
Drop down 2
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-2">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Item 333</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Item 99999</a>
</li>
</ul>
</div>
</nav>
</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>
Bootstrap 4 dropdown with full width in Mobile
Option 1 the dropdown is contained in the col-10. You could use col-md-10 instead so that the containing col is full-width on mobile? (no extra CSS changes)
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
https://jsfiddle.net/3jq0ozfs/
Option 2 is to position:static the containers (dropdown & col-10). This will keep the col-2 and col-10 the same. (no extra CSS changes)
<div class="row">
<div class="col-2"></div>
<div class="col-10 position-static">
<div class="dropdown position-static">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu ml-1">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
https://jsfiddle.net/xsv1d6u5/1/
bootstrap 4 full width dropdown menu
For this you have to remove parent css position:relative. I have added some css please check.
.navbar .dropdown{
position: static;
}
.navbar{
position: static!important;
}
.dropdown-menu {
min-width: auto;
width: 100%;
height: auto;
text-align: center;
border-radius: 0;
border-width: 0px;
margin-top: -1px;
padding: 0 0;
max-height: 700px;
overflow: auto;
}
.dropdown-menu hr {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu ul>li {
padding-top: 0px;
}
.material-tab {
margin: 0 auto;
width: 100%;
border-bottom: 0px;
padding: 0 50px;
}
.header-inner {
padding: 15px 0;
min-width: auto;
margin: 0 auto;
}
.tab-header {
background: #EB3137;
padding: 0 15px;
color: #fff;
-webkit-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
-moz-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);
}
.nav.nav-tabs>li>a:focus,
.nav.nav-tabs>li>a:hover {
background: transparent;
outline: 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:active {
background: transparent;
color: #FFF;
cursor: default;
border: 0;
}
.nav-tabs>li>a {
position: relative;
color: rgba(255, 255, 255, 0.7);
border: 0px;
font-weight: bold;
padding: 12px 15px 14px 15px;
}
.nav-tabs>li>a:hover {
color: rgba(255, 255, 255, 0.8);
background: transparent;
}
ul.nav-tabs>li.active>a:after {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: white;
}
.tab-content.white-bg-tabs {
padding: 15px;
}
.tab-content.white-bg-tabs .tab-pane {
max-width: 960px;
margin: 0 auto;
background: white;
padding: 10px;
text-align: center;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #ddd;
}
.list-inline h6 p {
font-family: "Raleway Bold", sans-serif;
text-align: left;
color: #000;
}
.navbar .dropdown{
position: static;
}
.navbar{
position: static!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<header>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<ul class="nav nav-tabs animation" role="tablist">
<li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>
<li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>
<li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>
<li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>
<li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>
<li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content white-bg-tabs">
<div class="tab-pane active" id="cars" role="tabpanel">
00. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="vans" role="tabpanel">
0. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
1. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="suv" role="tabpanel">
2. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="mpv" role="tabpanel">
3. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="hybrid" role="tabpanel">
4. SOME ITEM w IMAGE / LIST HERE
</div>
<div class="tab-pane" id="performance" role="tabpanel">
5. SOME ITEM w IMAGE / LIST HERE
</div>
</div>
<!-- container -->
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity = "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin = "anonymous" > </script>Bootstrap full width dropdown menu
remove display:flex from .nav > li.dropdown.show .dropdown-menu { ( and text-align:center too )and add display:inline to your links
.nav > li.dropdown.show .dropdown-menu {
/* display: flex;*/
border-radius: 0px;
width: 100vw !important;
/*text-align: center;*/
left: 0;
right: 0;
}
.dropdown-menu > a {
height: 50px;
line-height: 50px;
vertical-align: middle;
display: inline;
}
here's a fiddle : https://jsfiddle.net/28g9f3ko/6/
use media-queries to restore the full width on mobile if you want
Related Topics
Opera and Custom Cursor in CSS
How to Delete Border Spacing in Table
How to Override Gwt Obfuscated Style for Datagrid Header
How to Override Device Pixel Ratio
Bootstrap 4.1 - to Get Grid System Only
Putting -Moz-Available and -Webkit-Fill-Available in One Width (CSS Property)
Sticky Navigation Element Jumps During Scroll
CSS Attribute Selector for Non-Empty Attributes
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)
Bootstrap Change Carousel Height
Change Accordion Button Collapsed Icon Color in Bootstrap 5
Z-Index Between Children and Parents
IE6 "Frame" Layout with 100% Height and Scrollbars
Which One Is Faster: Hex Color Codes or Color Names