Modifying bootstrap dropdown menu for full width dropdown

Question

Example so far here

code here

Simply, I have a menu with 8 items in it (the topmost menu). We are using a 12 item width grid in bootstrap and want the dropdown part of each menu (that appears when clicked) to be full width of the container.

Something similar to the navigation menu here

Any ideas?

Answer 1

using jquery you can find the height of the window and set the drop down div to this height minus the header height. Here is jQueries .outerHeight() https://api.jquery.com/outerHeight/