Full width dropdown menu
put this css might help
/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:block; width: 100%; }
.dropdown-menu>li { display: block; }
Full width css dropdown menu
/* not very relevant styling */
h1 { font-size: 20px; padding-top: 20px; }
.container { position: relative; margin: 20px auto 0 auto; width: 75%; }
.header { background: #eee; }
.nav { background: #ccc; }
/* relevant styling */
body { overflow-x: hidden; } /* trick from css-tricks comments */
/* FIRST LEVEL */
.nav > ul > li {
display: inline-block;
position: relative;
padding: 3px 10px 3px 0;
z-index: 100;
}
/* SECOND LEVEL */
.nav > ul > li > ul {
position: absolute;
left: 0;
top: 100%;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
z-index: 101;
visibility: hidden;
opacity: 0;
background: rgba(255, 240, 240, 0.8);
}
.nav > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
.nav > ul > li > ul > li {
padding: 3px 0;
}
.nav > ul > li:hover .drop {
font-weight: bold;
}<div class="header">
<div class="container">
<h1>Hank's Big Leauge Widgets</h1>
<span>You want a widget? we got 'em!</span>
</div>
<!-- NAVIGATION -->
<div class="nav">
<ul class="container">
<li>
<a class="drop" href="#">Products</a>
<ul>
<li><a href="#">Widget A</a></li>
<li><a href="#">Widget B</a></li>
<li><a href="#">Widget C</a></li>
</ul>
</li>
<li>
<a class="drop" href="#">Locations</a>
<ul>
<li><a href="#">Location A</a></li>
<li><a href="#">Location B</a></li>
<li><a href="#">Location C</a></li>
</ul>
</li>
<li>
<a class="drop" href="#">Staff</a>
<ul>
<li><a href="#">President</a></li>
<li><a href="#">VP</a></li>
<li><a href="#">Manager</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content container">
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
<p>All sorts of content</p>
</div>
**CSS and HTML**Dropdown Menu that takes full width inside a Max Width Container
Remove position: relative from nav.
If the parent's position is set to relative, a child element with position: absolute assumes an absolute position relative to its parent.
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}<div class="max">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a> </li>
<li><a href="#">Illustrator</a> </li>
</ul>
</li>
<li><a href="#">User Experience</a></li>
</ul>
</nav>Can't get full width in dropdown menu in css
Remove .dropdown class float:left and add the below given css:
.menu_dropdown .dropdowncontainer a{
display:block;
width:100%;
}
body{
margin:0px;
padding:0px;
}
.clearfix:before,.clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
.head_nav{
top: 0;
position: sticky;
z-index: 1;
background-color: #262626;
margin-bottom: 8px;
}
.head_nav a{
color: #d9d9d9;
float: left;
text-decoration: none;
}
.dropdown .menu_button {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
}
.menu_dropdown .header {
background: red;
padding: 16px;
color: white;
}
.menu_dropdown {
display: none;
position: absolute;
width: 100%;
left: 0;
z-index: 1;
background-color: #262626;
}
.menu_dropdown .dropdowncontainer a{
display:block;
width:100%;
}
.menu_button:hover+.menu_dropdown {
display: block;
}
.menu_dropdown a:hover {
color: white;
}
.dropdowncontainer{
background-color: inherit;
}<script src="https://use.fontawesome.com/ecdc7512a9.js"></script>
<div class="head_nav clearfix">
<a href="#">Home</a>
<div class="dropdown">
<button class="menu_button">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<div class="menu_dropdown">
<div class="dropdowncontainer">
<a href="#">Register</a>
<a href="#">Login</a>
<a href="#">Admin</a>
</div>
</div>
</div>
</div>Dropdown menu with full width over parents's width
Absolute positioning is positioned to the nearest positioned ancestor. Your nearest positioned ancestor is your container which is taking up 100% of the width of your 1500px navigation.
Change your container from
.container {
position: relative; /* Absolute Positioning Restraint */
width: 100%;
margin: 0 auto;
background-color: white;
}
to
.container {
width: 100%;
margin: 0 auto;
background-color: white;
}
I've tested this out and it spans to the full width. I hope I could help :)
If you'd like to learn more about how this works, I'd recommend Mozilla's in-depth article about Positioning.
How to get a full-width (of screen) dropdown-menu
The basic problem is that your <li> are positioned relativly, therefore any absolute positioning of decendents will be relative to the parent.
Would do something like this:
https://codepen.io/23b/pen/VbLpZe?editors=1100
Another solution would be to put the dropdown outside the <li> container altogther.
How to make dropdown's menu use full width when mobile only?
Give this css in mobile media query:
.ui.menu .item.marginless {
position: static;
}
.ui.dropdown .menu.notifications {
left: 0 !important;
margin: auto !important;
right: 0 !important;
width: 100%;
}
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
How to make li dropdown take full-width of viewport?
Depending on browser support you want to achieve, you can use the vw unit (viewport width) and set it to 100vw.
.my-dropdown-content{
display: none;
position: absolute;
right: 0;
background-color: #0A141A;
width: 100vw;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
Full working example
/* vv for demonstration purposes only*/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body{padding-top:60px;}
.menu{list-style:none;padding:0;}
.menu>li{float:left;width:20%;}
.menu>li>a{display:block;border:1px solid black;padding:1em}
/* ^^ for demonstration purposes only*/
.my-dropdown{
position: relative;
display: inline-block;
}
.my-dropdown-content{
display: none;
position: absolute;
right: 0;
background-color: #0A141A;
width: 100vw;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.my-dropdown-content li {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.my-dropdown:hover .my-dropdown-content {
display: block;
}<ul class="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="my-dropdown"><a href="#">More. . .</a>
<ul class="my-dropdown-content">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"><li><a href="#">sub-1</a></li></div>
<div class="col-md-4"><li><a href="#">sub-1</a></li></div>
<div class="col-md-4"><li><a href="#">sub-1</a></li></div>
</div>
</div>
</ul>
</li>
</ul>Related Topics
Margin-Top Percentage Does Not Change When Window Height Decreases
Font-Weight Is Not Working Properly
How to Delete Border Spacing in Table
Svg + CSS3 Animation Not Working with Link Markup
Applying Webkit Transitions to Pseudo Elements
Center Overflowing Div Inside Smaller Div
CSS Transition - Fade Element on Hover Only
Bootstrap Responsive Columns Height
Tailwindcss: Fixed/Sticky Footer on the Bottom
Why Doesn't This CSS Transition Work on Svg Inside an Anchor
How to Solve the Table Row Background Image Problem, in Chrome, in Multi Celled Tables
Bootstrap Change Carousel Height
Media Queries for Tablet Min-Resolution and Max-Resolution
Why Does Space-Around Allow Flex Items to Overflow on the Left Side
CSS - CSS Coding That I Have Never Seen