Gry_hat
Reputation: 11
how can i align bootstrap 4 dropdown menu to left and expand to full length
In the above code am trying to align the dropdown to left and with full width as i have tried different measures for solving it by adding dropdown-menu-left or pull-left by seems like it's not working for me, i want it to work the following dropdown as we can see in poorishaadi.com but am unable to fix it, it will be great if anyone can help am using simple bootstrap to work this code.
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
}
.dropdown>.dropdown-menu {
min-width: 570px;
margin-top: 8px;
}
.multi-column-dropdown {
list-style: none;
margin-left: 20px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: rgb(0, 0, 0);
white-space: normal;
margin-top: 10px;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #f80606;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white
sticky-top ">
<div class="container">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Upvotes: 1
Views: 1046
Answers (4)
Kapil Karangeeya
Reputation: 310
You need to add position-relative class to your main container and then remove position-relative from .navbar-nav > li.nav-item.dropdown and add width:100% to .dropdown > .dropdown-menu to make it full width.
.navbar-nav > li{
padding-left:10px;
padding-right:10px;
font-size: 15px;
}
.navbar-nav > li.nav-item.dropdown {
position: inherit;
}
.dropdown > .dropdown-menu {
min-width: 570px;
margin-top: 8px;
width: 100%;
}
.multi-column-dropdown {
list-style: none;
margin-left: 20px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: rgb(0, 0, 0);
white-space: normal;
margin-top: 10px;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #f80606;
}
.nav-wrapper {
position: relative;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white sticky-top ">
<div class="container nav-wrapper">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Upvotes: 0
sajee
Reputation: 245
Please have a look on this solution.
Currently your dropdown-menu is relative to the nav-item.
It should be relative to the outer full width container...
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
font-size: 15px;
}
.dropdown>.dropdown-menu {
min-width: 570px;
margin-top: 8px;
}
.multi-column-dropdown {
list-style: none;
margin-left: 20px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: rgb(0, 0, 0);
white-space: normal;
margin-top: 10px;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #f80606;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
/* Extra added */
.container {
position: relative;
}
.nav-item {
position: static !important;
}
.dropdown-menu {
width: 100%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white
sticky-top ">
<div class="container">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>Upvotes: 1
manneJan89
Reputation: 1024
You need to add position-static class to your <li> items and then add the class w-100 to your dropdown menu to make it full width.
See your modified code:
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white sticky-top">
<div class="container">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active position-static">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column w-100" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
here is a fiddle too (to see it in action).
Upvotes: 1
Shahaji Deshmukh
Reputation: 646
Just remove the text-center class from the <div id="collapsenavbar">. Below are the updated code:
.navbar-nav > li{
padding-left:10px;
padding-right:10px;
font-size: 15px;
}
.dropdown > .dropdown-menu {
min-width: 570px;
margin-top: 8px;
}
.multi-column-dropdown {
list-style: none;
margin-left: 20px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: rgb(0, 0, 0);
white-space: normal;
margin-top: 10px;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #f80606;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white
sticky-top ">
<div class="container">
<a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsenavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="caterers.php">Caterers</a></li>
<hr />
<li><a href="decorer.php">Decorator</a></li>
<hr />
<li><a href="dholwale.php">Dhol Wale</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="flowrdecor.php">Flower Decorator</a></li>
<hr />
<li><a href="makeupart.php">Makeup Artist</a></li>
<hr />
<li><a href="mehandi.php">Mehandi Artist</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="photo.php">Photography</a></li>
<hr />
<li><a href="sound.php">Sound & DJ</a></li>
<hr />
<li><a href="Venue_1.php">Venue</a></li>
<hr />
</ul>
</div>
<div class="col-md-3 col-sm-3 col-lg-3">
<ul class="multi-column-dropdown">
<li><a href="cards.php">Wedding Cards</a></li>
<hr />
<li><a href="Wedplan.php">Wedding Planner</a></li>
<hr />
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>Upvotes: 0
Related Questions
- How to style Bootstrap dropdown-menu to be full page width?
- Align menu right in bootstrap
- How to create a drop-right menu using bootstrap on a drop-down menu
- How can I make my Bootstrap 4 navbar dropdown full width?
- bootstrap take full width for select drop down
- bootstrap 4 drop down not coming right aligned
- Making the dropdown menu aligned to the right in bootstrap 3
- How to align bootstrap dropdown menus underneath selected nav item
- How to make a dropdown sub-menu expand to the right in Bootstrap 3
- Bootstrap horizontal dropdown menu aligned to right