How to style Bootstrap dropdown-menu to be full page width?

Question

I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block } (that's easy), but so I need the actual ul.dropdown-menu to stretch the full width of the page. I can't seem to figure it out.

Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)

Will probably need to wrap another element too, actually, as the ul needs to be centered.

So does anyone know how to do this?

EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:

.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }

and there you have it!

please share all the relevant code and put it in a [jsFiddle.net](http://jsfiddle.net/) so we can play with it — MilkyTech, May 08 '14 at 16:45

score 41 · Answer 1 · answered Mar 22 '15 at 09:17

41

First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:

.nav > li.dropdown.open {
    position: static;
}
.nav > li.dropdown.open .dropdown-menu {
    display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
    display: table-cell;
}

check the demo here http://www.bootply.com/8EgGsi4F7w

answered Mar 22 '15 at 09:17

Hesham Hassan

761
6
14

If I use this, i can't make the menu open on hover (vs. click). It just shrinks the menu back to default size. – Rachel S Feb 24 '16 at 20:25
@hesham is there any possibility for container. – Ilyas karim Apr 02 '16 at 11:48
@IlyasDattoo Do you mean wrapping the menu in container? or what do you mean ? – Hesham Hassan Apr 02 '16 at 14:15
@heshamelghndour Yeah i am wrapping the navbar in container. – Ilyas karim Apr 03 '16 at 11:03
Yes i got a solution. Just changing the dropdown position to `fixed` and set the `top` value as you want :) Check the demo http://www.bootply.com/Djig4iuQlg – Hesham Hassan Apr 03 '16 at 13:07
1

@heshamelghndour I also got a solution. By giving position `relative` to `.container`. – Ilyas karim Apr 04 '16 at 11:19
2

I think you'll favor these results too -- http://stackoverflow.com/questions/26147186/how-to-restrict-width-of-bootstrap-3-dropdown-menu-in-navbar – Uncle Iroh May 15 '16 at 07:14

score 22 · Answer 2 · edited Apr 24 '17 at 11:28

22

<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">

just use the position: initial in the main li(dropdown) of your nav and in the child ul dropdown-menu set width 100%

edited Apr 24 '17 at 11:28

Cœur

37,241
25
195
267

answered Apr 24 '17 at 07:12

Waqar Jamil

229
2
2

A nice approach! – Usama Ejaz Sep 19 '20 at 10:03
simple, efficient .. very nice. – John.M May 22 '21 at 01:02

score 0 · Answer 3 · answered Feb 24 '23 at 11:07

Here the alternative that worked for me.

I just tried option 2. The key is:

Adding class position-static along with (the) dropdown class, which is the parent class of dropdown-menu as follows:

<li class="nav-item dropdown position-static">

Credit to its author: VigneshKannan3 from GeeksforGeeks

It looks like this answer to a similar question has the same approach.

score -1 · Answer 4 · answered Dec 29 '18 at 00:55

Check this

.nav > li.dropdown.open {
  position: static;
}

.nav > li.dropdown.open .dropdown-menu {
  display: table;
  border-radius: 0px;
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
}

.dropdown-menu > li {
  display: table-cell;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .dropdown-menu > li {
    display: block;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="navbar navbar-default navbar-static-top">
  <div class="container">

    <div class="navbar-header">
      <div class="navbar-brand">Blackcat</div>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse btnCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Shop</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artist <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Rich</a></li>
            <li><a href="#">Shay</a></li>
            <li><a href="#">Jose</a></li>
            <li><a href="#">Marie</a></li>
            <li><a href="#">Simon</a></li>
            <li><a href="#">Jamie</a></li>
            <li><a href="#">Andrew</a></li>
            <li><a href="#">Teddie</a></li>
          </ul>
        </li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </div>
  <!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->

<!-- container -->
<div class="container">
  <div class="row">
    <p>Site content here...</p>
  </div>
  <!-- End row -->
</div>
<!-- End container -->

Adding a brief explanation of *why* the code above answers the question asked, will be more useful to others, than just code alone. — SOS, Dec 29 '18 at 02:19

How to style Bootstrap dropdown-menu to be full page width?

4 Answers4

Linked

Related