Khan
Reputation: 251
How to align dropdown menu right underneath nav item
I have been trying to attempt to align the "Big Dropdown" midmenu right below the actual Nav Item instead of opening off-screen like it does now, pretty sure i'm just missing something but would like to achieve this in the cleanest way possible.
HTML
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu megamenu midmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
CSS
nav.main .megamenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
nav.main .midmenu {
position: absolute;
padding: 20px 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
Codepen - Please See "Big Dropdown"
https://codepen.io/GH5ST/pen/GGgWPK
Upvotes: 2
Views: 674
Answers (2)
Sayo Komolafe
Reputation: 998
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800|Roboto:300,400,400i,500,500i,700");
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
header .container-fluid {
max-width: 1500px;
width: 100%;
}
/* Navigation Sub
------------------------------------- */
nav.sub {
border-bottom: 1px solid #ebebeb;
padding: 10px 0;
}
/* Navigation Main
------------------------------------- */
nav.main {}
nav.main .nav-logo {
max-width: 200px;
width: 100%;
}
nav.main ul {
padding-left: 0;
list-style-type: none;
}
/* ------ Mega Menu ------ */
nav.main .megamenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ------ Mid Menu ------ */
nav.main .midmenu {
position: absolute;
padding: 20px 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin-left: auto;
margin-right: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<header>
<nav class="navbar navbar-expand-lg navbar-light main bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Mega Dropdown</a>
<ul class="dropdown-menu megamenu">
<div class="row">
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu megamenu midmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Normal Dropdown</a>
<div class="dropdown-menu">
<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>
</div>
</nav>
<nav class="sub">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center">
<div class="dropdown mr-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Website
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://www.google.com">Action</a>
<a class="dropdown-item" href="https://www.google.com">Another action</a>
<a class="dropdown-item" href="https://www.google.com">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Country
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
<button class="btn btn-outline-secondary btn-sm ml-auto">Search</button>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
My Account
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm" type="button">
1-800-MELISSA
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>Upvotes: 1
billy.farroll
Reputation: 1921
This worked for me, I gave the big dropdown a new class and adjusted the margin and absolute position. (copy and paste into your Codepen to try):
<nav class="sub">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center">
<div class="dropdown mr-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Website
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://www.google.com">Action</a>
<a class="dropdown-item" href="https://www.google.com">Another action</a>
<a class="dropdown-item" href="https://www.google.com">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Country
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
<button class="btn btn-outline-secondary btn-sm ml-auto">Search</button>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
My Account
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
<div class="dropdown ml-2">
<button class="btn btn-outline-secondary btn-sm" type="button">
1-800-MELISSA
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light main bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Mega Dropdown</a>
<ul class="dropdown-menu megamenu">
<div class="row">
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-3">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Big Dropdown</a>
<ul class="dropdown-menu bigmenu ">
<div class="row">
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="col-md-6">
<ul>
<h6 class="list-header">List Header</h6>
<hr>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
<li>
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button">Normal Dropdown</a>
<div class="dropdown-menu">
<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>
</div>
</nav>
</header>
CSS:
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800|Roboto:300,400,400i,500,500i,700");
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
header .container-fluid {
max-width: 1500px;
width: 100%;
}
/* Navigation Sub
------------------------------------- */
nav.sub {
border-bottom: 1px solid #ebebeb;
padding: 10px 0;
}
/* Navigation Main
------------------------------------- */
nav.main {
}
nav.main .nav-logo {
max-width: 200px;
width: 100%;
}
nav.main ul {
padding-left: 0;
list-style-type: none;
}
/* ------ Mega Menu ------ */
nav.main .megamenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
max-width: 1500px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ------ Mid Menu ------ */
nav.main .midmenu {
position: absolute;
padding: 20px 20px;
float: left;
top: auto;
left: auto;
right: auto;
max-width: 650px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
nav.main .bigmenu {
padding: 20px 20px;
position: absolute;
top: auto;
left: ;
right: 0;
max-width: 800px;
width: 100%;
margin-left: 50em;
margin-right: auto;
}
Upvotes: 3
Related Questions
- Making the dropdown menu aligned to the right in bootstrap 3
- How to align bootstrap dropdown menus underneath selected nav item
- How to right-align drop-down menu in nav?
- How to align dropdown menu in Navbar in Bootstrap with css?
- Twitter Bootstrap Navigation Bar - Right Align Dropdown Menu
- Using bootstrap to align dropdown-menu to middle
- how to let dropdown menu align-right?
- alignment for twitter bootstrap dropdown-menu
- Bootstrap horizontal dropdown menu aligned to right
- bootstrap drop down menu not aligned