dropdown-menu in navbar isn't full-width and obscures elements on mobile

Created by: lvmajor

When navigating mobile website, if we use a dropdown-menu in our navbar, then when expanding it, it hides other navbar items and doesn't expand to take full widht of the menu)

Here is an image in which this issue is apparent:

Here is a ply showing the same snippet but with a little modification to the css: http://codeply.com/go/4JLsdMHESx

In this, I modified the dropdown-menu behavior when used inside a navbar that is collapsed and in sight. I know nesting should be avoided but I thought we wouldn't want to change dropdown-menu behavior if not used in this particular scenario... maybe there is a better alternative and if it is the case, I'm totally open to suggestions.

.collapse.in .dropdown-menu { position:relative; width:100%; }

Here is the result in case you don't want to open the ply:

Maybe we could make the dropdown-menu take the full page-width instead of respecting the padding but that's more of a design decision and I'll let you decide what would be better.

Operating system: Windows 10 Browsers: Chrome 52.0.2743.82, Edge 25.10586.0.0