Pop-up brochure

Question

I am trying to create a popup width expansion using bootstrap as you can see in this figure . Now I have something like this (I removed unnecessary items from the navigation 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 a dropdown like this . I haven’t made any changes to the navigation bar and the drop-down menu has fewer files - that’s why I don’t post CSS, it is pure Bootstrap 3.2.0 . I just played with CSS rules in Chrome, disabled them and changed their values ​​(those that have something in common with positioning).

My own rules have been added, but still I can’t figure out how to make it 100% of the width of the viewport. It probably inherits the width from the parent, which, of course, does not have the width of the viewport. This can be a problem.

Also I found this section , but it did not help me. I was on a scene where I had about 800 pixels of width (when I used width: 100% ), but it was aligned to "Kalkulačky", and if I wanted it to start from the left edge of the screen, I had to use left: -100px . Do you have ideas? I am literally lost.

Please be kind - I do not have good CSS knowledge and I just started with Bootstrap.

Answer 1

For the default navbar component not related to 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

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

Answer 2

Best to use this plugin.

http://geedmo.imtqy.com/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; } } 

Answer 3

Have you tried this CSS, this might help.

  .dropdown-menu { min-width:auto; width:100%; }