Full width Bootstrap dropdown nav

Question

I'm trying to create full width dropdown using bootstrap as you can see on this picture. Now I have something like this (I have removed unnecessary items from the nav list):

<ul class="nav navbar-nav navbar-right">
    <li>
        <a href="/_work/cz.krupovi/www/o-nas">O nás</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Kalkulačky <span class="caret"></span></a>
        <ul class="dropdown-menu list-inline" role="menu">
            <li><a href="#">RPSN Kalkulačka</a>
            </li>
            <li><a href="#">Inflační kalkulačka</a>
            </li>
        </ul>
    </li>
</ul>

And I need to create dropdown like this one. I haven't done any changes to navbar and dropdown less files - this is the reason why I don't post CSS, it's pure Bootstrap 3.2.0. I just played with CSS rules in Chrome, disabled them and changed values of them (those that have something common with positioning).

Added my own rules but still I can't figure out how to make it 100% of viewport width. Probably it inherits width from parent which - of course - doesn't have viewport width. This could be the problem.

Also I have found this topic but it didn't help me. I was in stage where I got about 800px width dropdown (when I used width: 100%), but it was aligned under "Kalkulačky" and if I wanted it to start on the left edge of the screen I had to use left: -100px. Do you have any ideas? I'm competently lost.

Please be benevolent - I don't have good knowledge in CSS and I just started with Bootstrap.

Answer 1

For a default navbar component not wrapped in a div.container you can use the following CSS:

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

demo

The display: table-cell can also be replaced with display: inline-block;

Answer 2

Best to use this plugin

http://geedmo.github.io/yamm3/

HTML

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li>
               <div class="yamm-content">
                  <div class="row"> 
                    ...
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

LESS

/*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 * http://geedmo.github.com/yamm3
 * 
 * @geedmo - Licensed under the MIT license
 */

//-----------------------------
//  Yamm Styles
//-----------------------------

.yamm {

  // reset positions 
  .nav, .collapse, .dropup, .dropdown {
    position: static;
  }  

  // propagate menu position under container for fw navbars
  .container {
    position: relative;
  }

  // by default aligns menu to left
  .dropdown-menu {
    left: auto;
  }

  // Content with padding 
  .yamm-content {
    padding: 20px 30px;
  }

  // Fullwidth menu
  .dropdown.yamm-fw .dropdown-menu {
    left: 0; right: 0;
  }

}