title: How to adapt bootstrap navbar drop-down to be inline
body: <p>I've been asked to have inline sub-menu items for a site I'm making using Bootstrap. </p>
  
  <p>The default with Bootstrap for drop-down is a nice 'downdown-toggle' class where items are stacked and only width of items with some padding. </p>
  
  <p>How can I adapt that class for the sub-menu background to be 100% screen width, then sub-menu items in container and items (li's) to be inline not stacked? See mock-up image of what I want to achieve. </p>
  
  <p>Note that unlike the current sub-menu, this would need to push all content below down rather than hover over it.</p>
  
  <p><img src="https://i.stack.imgur.com/vmI0M.jpg" alt="enter image description here"></p>
  
  <p><strong>EDIT</strong> after mk14 gave really good code below. This is what I get (see image below). I just need items to be in a container (i've shown in yellow) and to push the content of the page down and back up as menu shows and hides. To reiterate, I want the grey background to be 100% width of screen as I said, but items in the container. </p>
  
  <p><img src="https://i.stack.imgur.com/UFBm8.jpg" alt="enter image description here"></p>