jmv jmv - 6 months ago 152
CSS Question

bootstrap 4 full width dropdown menu



.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;
}

<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>





how to make submenu full width in Bootstrap 4, I'm having problems doing it . and still no luck it bugs me. I also have tabs and images inside my dropdown that's why I want it to be full width. and to be properly used by users.
I'm able to make it work on bootstrap 3 but added a lot of functionality that would not work in bootstrap 3 that will be able to work on bootstrap 4.

<nav class="navbar navbar-default ">
<ul class="nav justify-content-end">

<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">
<ul class="list-inline">
<div class="row">
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_car1.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR1
<br>P 611,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_CAR2.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR 2
<br>P 896,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_car3.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR3
<br>P 1,595,000 starting</p>
</h6>
</li>
<li class="col col-md-4">

<a href=""><img src="img/dropdown/cars/choose_CAR4.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR4
<br>P 745,000 starting</p>
</h6>
</li>
<li class="col col-md-4">
<a href=""><img src="img/dropdown/cars/choose_CAR5.png"></a>
<h6 class="price-notice">* price may vary
<br>
<p>2017 CAR5
<br>P 526,000 starting</p>
</h6>
</li>
</div>
</ul>
</div>

</div>
<!-- container -->
</div>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>


This is my working CSS in Bootstrap 3

.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;
}

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download