8

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.

Community
  • 1
  • 1
Northys
  • 1,305
  • 3
  • 16
  • 32

3 Answers3

19

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;

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thank you a lot, I switched to your solution and it worked for me. Sorry for delay but I haven't been here for a while and my phone didn't notify me about your answer. +1 and solved – Northys Nov 06 '14 at 23:14
  • i would recommend wrapping this in `@media (min-width:641px){ }` so the standard dropdown would still apply for mobile devices – Adam Joseph Looze Apr 08 '15 at 16:21
  • @BassJobsen There seems to be a problem with safari, right? The sub-menu does not disappear correctly ... – Brightweb May 03 '15 at 22:58
  • i don't know. If the [demo](http://www.bootply.com/8EgGsi4F7w) won't work on safari you should possible ask a new question (or buy me a mac so i can test it :) ) – Bass Jobsen May 03 '15 at 22:59
  • @BassJobse, I created a topic: https://stackoverflow.com/questions/30043487/full-width-bootstrap-dropdown-nav-not-working-in-safari. Please, could you take a look to the print screen? Thanks! – Brightweb May 05 '15 at 03:22
  • confirmed, it doesn`t disappear correctly on latest Safari (Version 8.0.6 (10600.6.3)) - Yosemite – Northys May 28 '15 at 19:43
  • 1
    @Northys does https://stackoverflow.com/questions/30043487/full-width-bootstrap-dropdown-nav-not-working-in-safari/30517483 fix your issue? – Bass Jobsen May 28 '15 at 21:35
  • @BassJobsen yes, it does – Northys Jun 20 '15 at 15:24
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;
  }

}
Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142
  • I used the css of the plugin for what I needed: only one option in full width, which was not possible using the plugin as is. Good resource. – atfornes Aug 16 '16 at 09:49
-2

Have you tried this CSS, it might help.

 .dropdown-menu {
      min-width:auto;
      width:100%;
 }
iamprogrammer10
  • 5
  • 4